vue安装scss,而且全局引入

时间 2020-05-17

标签 vue 安装 scss 而且全局引入繁體版

原文原文链接

在写vue的css样式时，以为须要css预处理器让本身的css更加简洁、适应性更强、可读性更佳，更易于代码的维护，因而在vue-cli脚手架采用scss。写过的人都知道，每写一个.vue文件都要在style上面@import global.scss文件的话，这样很麻烦。css文件能够在main.js中能够直接import，而scss文件import会报错，所以记录下处理的方法。css

1. npm install node-sass --save-dev vue

npm install sass-loader --save-dev node

npm install style-loader --save-devvue-cli

2. npm install sass-resources-loader --save-devnpm

3.修改build中得utils.jssass

scss: generateLoaders('sass') 修改为: scss: generateLoaders('sass').concat( { loader: 'sass-resources-loader', options: { resources: path.resolve(__dirname, '../src/assets/global.scss') } } )

4.修改scss文件名为global.scssui