vue-cli2使用sass定义全局样式及变量
vue-cli2创建的vue项目使用sass预处理器需按顺序安装以下插件，其中sass-loader版本和node-sass需要安装固定版本，其他的依赖不要求版本，亲测有效。如果不不固定sass-loader和node-sass的版本，可能会报出一些运行时的错误：Node Sass version 5.0.0 is incompatible with^4.0.0
Node Sass version 5.0.0 is incompatible with^4.0.0
需要卸载已安装的sass-loader和node-sass，除以下方式外也可以在package.json中手动将sass-loader和node-sass的版本修改为指定的7.3.1和4.14.1版本
npm uninstall node-sass
npm install node-sass@4.14.1
"@babel/core": "^7.12.3",
"sass-resources-loader": "^2.1.1",
"sass-loader": "^7.3.1",
"node-sass": "^4.14.1",
build/utils.js中配置exports.cssLoaders中return部分，配置如下:
// https://vue-loader.vuejs.org/en/configurations/extract-css.html
return {
css: generateLoaders(),
postcss: generateLoaders(),
less: generateLoaders('less'),
sass: generateLoaders('sass', { indentedSyntax: true }),
scss: generateLoaders('sass').concat(
{
loader: 'sass-resources-loader',
options: {
resources: path.resolve(__dirname, '../src/assets/css/var.scss') //这里是单独建的存放变量的scss，我的是 var.scss
}
}
),
stylus: generateLoaders('stylus'),
styl: generateLoaders('stylus')
}
/src/assets/css/var.scss文件中是定义的全局的sass变量，例如色值变量：
$link-blue: #2b83e6;
$yellow-green: #b0eb00;
$gray: #595959;
$dark-gray: #363636;
$light-gray: #a6a6a6;
main.js文件中也可以引入公共的scss样式，如清除浮动，去除padding之类的样式，main.js中的引入方式如下：
import './assets/css/global.scss'
global.scss文件如下：
*{
padding: 0;
margin: 0;
}
clearfix:after{
content: "";
display: block;
height: 0;
clear:both;
visibility: hidden;
}
.clearfix{
*zoom: 1;/*ie6清除浮动的方式 *号只有IE6-IE7执行，其他浏览器不执行*/
}
如果在main.js中引入global.scss文件时，出现如下报错：* ./assets/css/global.scss in ./src/main.js
ERROR Failed to compile with 1 errors 8:47:07
This relative module was not found:
* ./assets/css/global.scss in ./src/main.js
Error from chokidar (D:\): Error: EBUSY: resource busy or locked, lstat 'D:\pagefile.sys'
需要在build/文件中module.rule去掉类似如下的对scss文件的处理：
{
test: /\.scss$/,
loader:'style!css!sass'
}
vue-cli3使用sass定义全局样式及变量
vue-cli3创建的项目无需配置，可以直接在vue文件中使用lang="scss"
vue-cli3中要使用全局定义的色值变量需要在vue.config.js中配置
module.exports = {
// ...
css: {
loaderOptions: {
sass: {
data: `@import "@/assets/css/var.scss";`
}
}
}
}
在vue文件中使用全局变量的方式如下：
<template></template>
<script></script>
<style lang="scss" scoped>
button{
color: $link-blue;
}
</style>
github项目地址：https://github.com/xiaoaiai/vue-sass-test
