vue中sass的使用

前言：这里是用vue2开发的，vue3的sass安装方法有部分不一样。

一、安装相关包

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

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

npm ls node-sass sass-loader  //查看安装情况

//如果报错可能是安装版本有问题，可以卸载后安装node版本对应的sass版本：

npm uninstall sass-loader

npm uninstall node-sass

二、配置

修改build文件夹下面的webpack.base.conf.js文件，module->rules下面添加如下新规则：

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

三、修改style标签

在style标签中添加lang="scss"即可，如果是css文件将.css后缀改为.scss。

<style lang="scss" scoped>
　　.bg{
　　　　font-size: .2rem;
　　}
<style>