vue-cli3中App.vue和main.js引用public.scss的问题

Question

public.scss:

.hello {
    .world {
        color:red;
    }
}

main.js:

import '@/assets/style/public.scss';

App.vue:

@import url('~@/assets/style/public.scss');

问题：

1. 在App.vue引入public.scss样式属性不生效，不支持嵌套结构，支持普通CSS结构。
2. 在main.js引入public.scss样式属性生效，支持嵌套结构

想知道为什么？

Answer 1

import '@/assets/style/public.scss';
这是ES6的语法，会经过wepack打包处理

而@import url('~@/assets/style/public.scss');
这是css的语法，不会经过scss-loader,所以不支持嵌套

可以尝试在App.vue 的 <script> 标签中引入
import '@/assets/style/public.scss';

Answer 2

Answer 3

1楼说的基本正确。不过不建议在 <stype> 标签里引入，直接在 <script> 里 import 即可。

顺便说下，尽快升级到 @vue/cli@4 吧，主要为了使用 core-js@3。