Skip to content

Commit db54537

Browse files
Jinjiangkazupon
authored andcommitted
[CN] Added "Loading a global settings file" (#964)
* [CN] Added "Loading a global settings file" * Typo
1 parent 25ac3f8 commit db54537

File tree

1 file changed

+34
-0
lines changed

1 file changed

+34
-0
lines changed

docs/zh-cn/configurations/pre-processors.md

Lines changed: 34 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -37,6 +37,40 @@ npm install sass-loader node-sass --save-dev
3737

3838
如要获得更多关于 `vue-loader` 的配置信息,请查看 [Loader 进阶配置](./advanced.md) 章节。
3939

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+
4074
### JavaScript
4175

4276
Vue 组件中的所有 JavaScript 默认使用 `babel-loader` 处理。你也可以改变处理方式:

0 commit comments

Comments
 (0)