vue全局引入scss样式文件

1.安装与使用 

npm install node-sass@4.14.1 --save-dev

npm install sass-loader@7.3.1 --save-dev

<style scoped lang="scss">
      $green:green;
      div{
            color: $green;
       }
</style> 

2.引入SCSS全局变量

需要配置vue.config.js，没有这个文件可以新建一个。之后引入scss文件，可多个配置如下：

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

 引入文件之后就可以在scss文件中写公共的样式、变量，比如在_global.scss文件声明一个红色变量中：

 $red:red;

 之后再在ndex.vue页面中直接引用红色变量,这样文字的颜色就会变成红色的，注意需要使用scss的页面都要在style标签中添加lang="scss"属性。

 <style scoped lang="scss">
      div{
            color: $red;
       }
</style>