vue使用scss，并且全局引入公共scss样式

有时我们项目的主题可能需要调整，如果每个页面的css都要修改那就太麻烦了，我们可以定义一些变量方便更改整个项目的配色。

基于官方提供的脚手架vue-cli进行搭建框架

等安装完所有依赖后，安装sass的依赖包：

cnpm i  sass-loader --save-dev
//sass-loader依赖于node-sass
cnpm i node-sass  --save-dev

在build文件夹下的webpack.base.conf.js的rules里面添加配置：

 {
        test:/\.scss$/,
        loader:['style','css','sass']
  }

在.vue文件中使用

<style scoped lang='scss'>

在static/css下建全局css变量文件，global.scss

global.jpg

然后在HelloWorld.vue使用定义的css变量

helloworld.jpg

配置sass全局变量

有一个babel插件可以完美的解决这个问题：sass-resources-loader可以访问sass资源任何一个需要访问的sass模块。所以，可以使用共享变量和混合所有SASS样式，而不去每个文件都引用。

cnpm i sass-resources-loader --save-dev

修改config/index文件
在module.exports里面添加以下代码

static: {
    scss: '../static/css/global.scss'
 },

修改build/utils文件
在exports.cssLoaders里面添加以下代码

  const resourecesSass = [];
  if (config.static.scss) {
    resourecesSass.push({
      loader: 'sass-resources-loader',
      options: {
        resources: path.resolve(__dirname, config.static.scss)
      }
    })
  }

sass-resource.jpg

修改下面的return代码

return.jpg

欧凯，到此为止，我们重新运行项目

1563346882(1).jpg