vue中安装sass，cli3配置全局sass/scss变量

• 安装了sass需要的安装包！

npm install node-sass --save
npm install sass-loader --save
//sass-loader的版本过高导致的编译错误npm install sass-loader@7.3.1 --save
npm 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里面就可以这么写就好了

本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！