安装了sass需要的安装包!
npm install node-sass --savenpm install sass-loader --save//sass-loader的版本过高导致的编译错误npm install sass-loader@7.3.1 --savenpm install style-loader --save或者npm install node-sass sass-loader style-loader --save
cli2 sass全局变量 还得需要一个包
npm install sass-resources-loader --save
然后在build>util.js中修改
scss: generateLoaders('sass')修改成:scss: generateLoaders('sass').concat({loader: 'sass-resources-loader',options: {resources: path.resolve(__dirname, '../src/assets/global.scss')//这里引入创建好的.cscc(里面定义变量)}})
cli3 在vue.config.js里面进行配置
module.exports = {css: {loaderOptions: {sass: {prependData: `@import "@/assets/scss/style.scss";`}}}}
最后我在vue文件的style里面就可以这么写就好了
<style scoped lang="scss">#add {width: 100px;height: 100px;background: $bg;}</style>