在項目中爲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;

可以看到，用模塊化的方式使用自己寫的樣式表，按正常的方式使用外部樣式表。運行結果如下：

可以看到來自自定義的樣式和外部樣式都起作用了，成功😊