react 项目sass的配置 vue 项目sass的配置

 

 

一：react   use    sass

从react-scripts 2.0.0开始就支持直接配置sass了！不用再自己配置webpack了！

 

前提：通过create-react-app脚手架搭建的项目

 

1：安装node-sass

npm install node-sass -D

 

2：安装sass-loader和node-sass依赖

npm install sass-loader node-sass --save-dev

3：react的webpack配置

找到node_modules/react-scripts/config/webpack.config.dev.js

在该文件中找到module下面的rules

继续增加

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

位置在这里

 

二：vue   use   sass

前提：通过  vue-cli  脚手架搭建的项目

1：安装sass-loader和node-sass依赖

npm install sass-loader node-sass --save-dev

3：vue的webpack配置

找到build文件夹下的webpack.base.conf.js

在该文件中找到module下面的rules

添加

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

位置在：