vue-cli 3.0集成sass/scss到vue项目

如果在创建项目没有选择CSS 预处理器，我们也可以手动安装sass-loader node-sass来集成scss。

npm install -D sass-loader node-sass

这时候安装完就可以在组件中使用scss了。

<style scoped lang="scss">
.wrap {
    h1{
        color:blue;
    }
}
</style>

引入SCSS全局变量

_variable.scss

$color-theme:#498eff;

如果想要使用scss变量的话，需要对配置文件做如下修改

vue service clie会自动使用我们安装的sass-loader作为scss内容的加载器。vue cli是基于webpack构建项目，如果想对sass-loader传递一些配置项，可以在vue.config.js配置。在项目的根目录下如果没有找到vue.config.js，手动创建即可。如下：

// vue.config.js
const fs = require('fs')
module.exports = {
  css: {
    loaderOptions: {
      sass: {
            prependData: `@import "~@/assets/scss/_variable.scss";`
            } 
         } 
      } 
}

这个文件variables.scss也是可以通过import在.vue组件里引入。

修改完配置文件记得重启下项目，接下来就可以使用scss变量，函数等功能了。

<style scoped lang="scss">
.wrap {
    h1{
        color:$color-theme;
    }
}
</style>