Skip to content

Commit

Permalink
docs: add guide for global scss loading (#861)
Browse files Browse the repository at this point in the history
* update docs for global scss loading

per this comment thread: vuejs/vue-loader#328 (comment)

* be more generic about webpack rule

* update text
  • Loading branch information
westwick authored and yyx990803 committed Jun 28, 2017
1 parent 0e93592 commit 27fd9a8
Showing 1 changed file with 34 additions and 0 deletions.
34 changes: 34 additions & 0 deletions docs/en/configurations/pre-processors.md
Original file line number Diff line number Diff line change
Expand Up @@ -37,6 +37,40 @@ Contrary to what its name indicates, [*sass*-loader](https://github.com/jtangeld

See the [Advanced Loader Configuration](./advanced.md) Section for further information about how to configure vue-loader.

#### Loading a global settings file

A common request is to be able to load a settings file in each component without the need to explicity import it each time, e.g. to use scss variables globally throughout all components. To accomplish this:

``` bash
npm install sass-resources-loader --save-dev
```

Then add the following webpack rule:

``` js
{
loader: 'sass-resources-loader',
options: {
resources: path.resolve(__dirname, '../src/style/_variables.scss')
}
}
```

As an example, if you are using [vuejs-templates/webpack](https://github.com/vuejs-templates/webpack), modify `build/util.js` like so:

``` js
scss: generateLoaders('sass').concat(
{
loader: 'sass-resources-loader',
options: {
resources: path.resolve(__dirname, '../src/style/_variables.scss')
}
}
),
```

It is recommended to only include variables, mixins, etc. in this file, to prevent duplicated css in your final, compiled files.

### JavaScript

All JavaScript inside Vue components are processed by `babel-loader` by default. But you can of course change it:
Expand Down

0 comments on commit 27fd9a8

Please sign in to comment.