vue 项目配置 scss

vue 配置 scss(局部)

一、输入命名

npm install node-sass --save-dev npm install sass-loader --save-dev npm install vue-style-loader --save-dev

二、找到/build/webpack.base.conf.js文件。如果需要在main.js中引入样式文件，不需要配置此文件。否则会编译报错。

module: { rules: [{ test: /\.(scss|css)?$/, loaders: ["style", "css", "sass"] }, ] }

三、使用方法

<style scoped lang="scss"> @import 'base.scss'; </style>

---

vue 配置 scss(全局引用)

一、输入命名

npm install node-sass --save-dev npm install sass-loader --save-dev npm install vue-style-loader --save-dev

二、安装sass-resources-loader

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

三、修改build中的utils.js，或者在main.js中引入。在组件中的style标签添加lang="scss"。

 scss: generateLoaders('sass'), //修改成: scss: generateLoaders('sass').concat( { loader: 'sass-resources-loader', options: { resources: path.resolve(__dirname, '../src/assets/style/base.scss') //自定义文件名 } } )