vue-使用sass定义全局样式及变量

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 [email protected]
           

"@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文件中使用

vue-cli3中要使用全局定义的色值变量需要在vue.config.js中配置

module.exports = {
  // ...
  css: {
    loaderOptions: {
      sass: {
        data: `@import "@/assets/css/var.scss";`
      }
    }
  }
}
           

在vue文件中使用全局变量的方式如下：

<template></template>
<script></script>
<style  scoped>
button{
color: $link-blue;
}
</style>
           

github项目地址：https://github.com/xiaoaiai/vue-sass-test