实际开发中，我们在编写 sass 文件时，经常会将全局的 scss 变量提取出来，放到一个单独的文件中，但是这样就有个问题，每个需要用到的组件，都需要手动 @import './styles/_var.scss' 进来，非常不友好。插件 sass-resources-loader 就很好地帮我们解决这个问题，先安装一下：
npm install sass-resources-loader --save-dev
然后修改 webpack.config.js 文件中 vue-loader 相关配置：
// ... { test: /.vue$/, loader: 'vue-loader', options: { loaders: { scss: [ { loader: 'vue-style-loader' }, { loader: 'css-loader' }, { loader: 'sass-loader' }, // 看这里，看这里，看这里 { loader: 'sass-resources-loader', options: { // 这里的resources 属性是个数组，可以放多个想全局引用的文件 resources: [resolve('./src/styles/_var.scss')] } } ] } } } // ...
配置就完成了，我们再来测试下。
在 src 目录下分别创建 hello1.vue 和 hello2.vue 文件：
<!-- hello1.vue --> <template> <h1>{{ msg }}</h1> </template> <script> export default { name:'hello1', data () { return { msg:'Hello Vue.js 单文件组件~' } } } </script> <stylelang="scss"> h1 { color: $green; } </style> <!-- hello2.vue --> <template> <h1>{{ msg }}</h1> </template> <script> export default { name:'hello2', data () { return { msg:'Hello Vue.js 单文件组件~' } } } </script> <stylelang="scss"> h1 { color: $red; } </style>
然后创建一个 styles 目录，并在其中新建存放全局变量的文件 _var.scss :
$green: rgb(41, 209, 41); $red: rgb(177, 28, 28);
接下来，在 app.js 中引用两个组件：
import Vue from 'vue'; import hello1 from './hello1.vue'; import hello2 from './hello2.vue'; new Vue({ el: "#app", template: '<div><hello1/><hello2/></div>', components: { hello1, hello2 } });
重新运行项目就可以了。
有作用域的 style
单文件组件中为我们提供了一个非常便利的功能，就是当 style 标签添加 scoped 属性时，标签内的样式将只作用于当前组件中的元素。
接着上面的例子，运行后会发现 hello1.vue 中的 h1 颜色并不是想要的 $green 色，而是被 hello2.vue 中的样式覆盖了。于是分别在 hello1.vue 和 hello2.vue 的 style 标签上添加 scoped 属性，如下：
<!-- hello1.vue --> <stylelang="scss"scoped> h1 { color: $green; } </style> <!-- hello2.vue --> <stylelang="scss"scoped> h1 { color: $red; } </style>
这样一来我们的两个 h1 标签颜色都显示正常了。
自定义块
在编写某些开源组件时，有时候我们需要同时维护多个组件和组件说明，但是每次修改就要同时修改 .vue 和 .md 文件，相当麻烦。 .vue 文件的 自定义语言块 功能，就允许我们将 markdown 说明同时写进 .vue 文件中，然后通过插件将其说明部分单独提取到相应的 .md 文件中，这样就可以同时维护说明文档和组件功能了。
比如我们将 hello1.vue 文件修改如下：
<docs> # 标题 这是标题内容，[仓库地址](https://github.com/yugasun/You-Dont-Know-Vuejs) ## 子标题 这是子标题内容 </docs> <template> <h1>{{ msg }}</h1> </template> <script> export default { name:'hello1', data () { return { msg:'Hello Vue.js 单文件组件~' } } } </script> <stylelang="scss"scoped> h1 { color: $green; } </style>
然后修改 webpack.config.js 配置：
const path = require('path'); // 引入相关插件 const ExtractTextPlugin = require('extract-text-webpack-plugin'); function resolve(dir){ return path.resolve(__dirname, dir); } module.exports = { // 入口文件 entry: './src/app.js', // 编译输出文件 output: { path: resolve('./'), filename: 'build.js' }, resolve: { alias: { // 因为我们这里用的是 require 引入方式，所以应该使用vue.common.js/vue.js/vue.min.js 'vue$': 'vue/dist/vue.common.js' } }, devServer: { // 这里定义 webpack-dev-server 开启的web服务的根目录 contentBase: resolve('./') }, module: { // 这里用来配置处理不同后缀文件所使用的loader rules: [ { test: /.vue$/, loader: 'vue-loader', options: { loaders: { scss: [ { loader: 'vue-style-loader' }, { loader: 'css-loader' }, { loader: 'sass-loader' }, { loader: 'sass-resources-loader', options: { resources: [resolve('./src/styles/_var.scss')] } } ], docs: ExtractTextPlugin.extract('raw-loader') } } }, { test: /.js$/, loader: 'babel-loader' } ] }, plugins: [ new ExtractTextPlugin('docs.md') ] }
这里用到了 extract-text-webpack-plugin 导出 text 插件，和 raw-loader ，分别都安装下就行。
然后运行构建命令 npm run build ，等运行结束，根目录下会同时生成一个 docs.md 文件，这就是我们想编写的说明文档。
点击查看源码：https://github.com/yugasun/You-Dont-Know-Vuejs/tree/master/chapter2/2
总结