File tree Expand file tree Collapse file tree 1 file changed +34
-0
lines changed
docs/zh-cn/configurations Expand file tree Collapse file tree 1 file changed +34
-0
lines changed Original file line number Diff line number Diff line change @@ -37,6 +37,40 @@ npm install sass-loader node-sass --save-dev
37
37
38
38
如要获得更多关于 ` vue-loader ` 的配置信息,请查看 [ Loader 进阶配置] ( ./advanced.md ) 章节。
39
39
40
+ ### 加载一个全局设置文件
41
+
42
+ 在每个组件里加载一个设置文件,而无需每次都将其显式导入,是一个常见的需求。比如为所有组件全局使用 scss 变量。为了达成此目的:
43
+
44
+ ``` bash
45
+ npm install sass-resources-loader --save-dev
46
+ ```
47
+
48
+ 然后增加下面的 webpack 规则:
49
+
50
+ ``` js
51
+ {
52
+ loader: ' sass-resources-loader' ,
53
+ options: {
54
+ resources: path .resolve (__dirname , ' ../src/style/_variables.scss' )
55
+ }
56
+ }
57
+ ```
58
+
59
+ 举个例子,如果你使用了 [ vuejs-templates/webpack] ( https://github.com/vuejs-templates/webpack ) ,请如下修改 ` build/utils.js ` :
60
+
61
+ ``` js
62
+ scss: generateLoaders (' sass' ).concat (
63
+ {
64
+ loader: ' sass-resources-loader' ,
65
+ options: {
66
+ resources: path .resolve (__dirname , ' ../src/style/_variables.scss' )
67
+ }
68
+ }
69
+ ),
70
+ ```
71
+
72
+ 在这个文件里,为了避免在最终编译后的文件中出现重复的 CSS,建议只包含变量、mixins 等。
73
+
40
74
### JavaScript
41
75
42
76
Vue 组件中的所有 JavaScript 默认使用 ` babel-loader ` 处理。你也可以改变处理方式:
You can’t perform that action at this time.
0 commit comments