From 9b0e6cd7484e445b00b497e8a1d5fea2eeb88024 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E5=8B=BE=E4=B8=89=E8=82=A1=E5=9B=9B?= Date: Mon, 4 Sep 2017 09:48:41 +0800 Subject: [PATCH 1/2] [CN] Added "Loading a global settings file" --- docs/zh-cn/configurations/pre-processors.md | 34 +++++++++++++++++++++ 1 file changed, 34 insertions(+) diff --git a/docs/zh-cn/configurations/pre-processors.md b/docs/zh-cn/configurations/pre-processors.md index d3779403c..9a8d1becc 100644 --- a/docs/zh-cn/configurations/pre-processors.md +++ b/docs/zh-cn/configurations/pre-processors.md @@ -37,6 +37,40 @@ npm install sass-loader node-sass --save-dev 如要获得更多关于 `vue-loader` 的配置信息，请查看 [Loader 进阶配置](./advanced.md) 章节。 +### 加载一个全局设置文件 + +在每个组件里加载一个设置文件，而无需每次都将其显示导入，是一个常见的需求。比如为所有组件全局使用 scss 变量。为了达成此目的： + +``` bash +npm install sass-resources-loader --save-dev +``` + +然后增加下面的 webpack 规则： + +``` js +{ + loader: 'sass-resources-loader', + options: { + resources: path.resolve(__dirname, '../src/style/_variables.scss') + } +} +``` + +举个例子，如果你使用了 [vuejs-templates/webpack](https://github.com/vuejs-templates/webpack)，请如下修改 `build/utils.js`： + +``` js +scss: generateLoaders('sass').concat( + { + loader: 'sass-resources-loader', + options: { + resources: path.resolve(__dirname, '../src/style/_variables.scss') + } + } +), +``` + +在这个文件里，为了避免在最终编译后的文件中出现重复的 CSS，建议只包含变量、mixins 等。 + ### JavaScript Vue 组件中的所有 JavaScript 默认使用 `babel-loader` 处理。你也可以改变处理方式： From 20d6408ab65a1c7792edef9caaed55400a2b4076 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E5=8B=BE=E4=B8=89=E8=82=A1=E5=9B=9B?= Date: Thu, 14 Sep 2017 16:32:25 +0800 Subject: [PATCH 2/2] Typo --- docs/zh-cn/configurations/pre-processors.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/zh-cn/configurations/pre-processors.md b/docs/zh-cn/configurations/pre-processors.md index 9a8d1becc..c880499db 100644 --- a/docs/zh-cn/configurations/pre-processors.md +++ b/docs/zh-cn/configurations/pre-processors.md @@ -39,7 +39,7 @@ npm install sass-loader node-sass --save-dev ### 加载一个全局设置文件 -在每个组件里加载一个设置文件，而无需每次都将其显示导入，是一个常见的需求。比如为所有组件全局使用 scss 变量。为了达成此目的： +在每个组件里加载一个设置文件，而无需每次都将其显式导入，是一个常见的需求。比如为所有组件全局使用 scss 变量。为了达成此目的： ``` bash npm install sass-resources-loader --save-dev