在项目中为scss或less文件启用模块化

在项目当中我们会用到很多第三方样式表，比如bootstrap，可以发现大多数第三方样式表都是.css文件。而之前我们为.css文件启用了模块化，这就导致我们在使用第三方样式表的时候非常不方便。我们希望不为第三方样式表启用模块化，只对自己写的样式表启用模块化。解决思路是：自己写的样式表都要以.scss结尾，只为.scss结尾的样式表启用模块化。

安装bootstrap

运行npm i bootstrap -S，由于bootstrap中有很多字体文件我们识别不了，所以需要装loader:npm i url-loader file-loader -D。安装完成之后配置一下：

{test: /\.ttf|woff|woff2|eot|svg/, use:"url-loader"}

引入方式：import "bootstrap/dist/css/bootstrap.css"

取消对.css文件的模块化

配置文件改为：

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

为.scss文件启用模块化

首先将自己写的样式表文件后缀名改为.scss，然后安装loader:npm i sass-loader -D，sass-loader依赖node-sass，直接安装node-sass会失败，因为网络问题（你懂的），所以需要首先配置一下镜像：

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

然后再运行npm i node-sass -D。
配置如下：

{
    test: /\.scss$/,
    use: [
        {loader: "style-loader"},
        {
            loader: "css-loader",
            options: {
                modules:{
                    localIdentName: "[path][name]-[local]-[hash:5]"
                }
            }
        },
        {loader: "sass-loader"}
    ]
}

效果

给出Hello.jsx组件中的代码：

import React from "react"
import cssobj from "@/css/styles.scss"
import "bootstrap/dist/css/bootstrap.css"
function Hello(props){
    return <div>
        <p className={cssobj.title}>Hello,{props.name}</p>
        <button className="btn-primary">按钮</button>
    </div>;
}

export default Hello;

可以看到，用模块化的方式使用自己写的样式表，按正常的方式使用外部样式表。运行结果如下：

可以看到来自自定义的样式和外部样式都起作用了，成功😊