vue -- 使用sass并引入公共sass文件

sass可以提高我们的开发效率，怎么在vue的项目中使用sass并且可以设置一些公共的文件呢？

使用sass

1、安装sass的依赖包

npm install --save-dev sass-loader //sass-loader依赖于node-sass npm install --save-dev node-sass

2、在build文件夹下的webpack.base.conf.js的rules里面添加配置

module: { rules: [ //...默认及其他 { test: /\.scss$/, loaders: ["style", "css", "sass"] } ] }

3、在.vue文件中修改style标签

<style lang="scss">

4、配置公共sass文件

1、下载依赖

cnpm install --save-dev sass-resources-loader

2、在build/utils.js中修改配置：

scss: generateLoaders('sass').concat( { loader: 'sass-resources-loader', options: { resources: path.resolve(__dirname, '../src/assets/scss/common.scss') //注意自己的路径 } } )

此时，我们就可以在我们创建的scss文件中肆意妄为的使用sass语法了！