Skip to content

[CN] Added "Loading a global settings file" #964

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 2 commits into from
Sep 14, 2017
Merged
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
34 changes: 34 additions & 0 deletions docs/zh-cn/configurations/pre-processors.md
Original file line number Diff line number Diff line change
Expand Up @@ -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` 处理。你也可以改变处理方式:
Expand Down