webpack打包（七）--使用sass

接上一篇webpack打包（六）--css模块化

写样式用sass又方便又高效，习惯之后根本回不去。

安装loader

npm i -D sass-loader node-sass

sass-loader依赖node-sassloader

配置loader

在webapck.config中添加规则,匹配处理scss结尾的文件

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

三个loader的顺序不能随便变动，因为loader是从右往左匹配处理的，首先要使用sass-loader将scss样式转换为css样式，然后才能用css-loader处理，最后使用style-loader插入样式

使用sass

在style文件夹下面新建sass_main.scss文件

div {
    background: yellow;

span {
    font-size: 40px;
    }
 }

修改app.js

import React from "react";
import ReactDOM from "react-dom";

import "./common/style/sass_main.scss"

ReactDOM.render(
    <div>
        React
        <span>span</span>
    </div>,
    document.getElementById("root")
);

运行
npm start

get

最后，css的模块化可以看这里webpack打包（六）--css模块化