Vue2.引入sass

1.安装依赖

npm install node-sass --save-dev       //安装node-sass
npm install sass-loader --save-dev         //安装依赖包sass-loader
npm install style-loader --save-dev        //安装style-loader

如果报错提示，就是版本过高

2.指定版本安装

sass-loader

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

node-sass

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

 如果运行项目报错 ：此问题是sass安装时获取源的问题，先修改sass安装的源，再运行npm install就成功了

 解决方法：卸载node-sass

npm uninstall node-sass

修改sass安装的源

npm config set sass_binary_site=https://npm.taobao.org/mirrors/node-sass

然后重新安装node-sass

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

3.配置loader

在项目中的build目录找到webpack.base.conf.js文件，在该文件module.export中的module.rules加入解释scss文件的loade

module.exports = {
    presets: [
        '@vue/cli-plugin-babel/preset'

    ],
    plugins: [
        ['import', {
            libraryName: 'vant',
            libraryDirectory: 'es',
            style: true
        }, 'vant'],

    ],
    //引入解析sass
    module: {
        rules: [{
            test: /\.scss$/,
            loader: 'sass-loader!style-loader!css-loader',
        }]
    }
}

使用:

<style lang="scss" scoped>

.box{
  width: 100vw;
  height: 100vh;
  border: 1px solid red;
  .content{
    width: 100%;
    height: 70%;
    margin: auto;
    .c_img{
    width: 50px;
    height: 50px;
    border: 1px solid black;
    }
    
  }

}
</style>