create-react-app創建react項目 css模塊化處理

用的css預處理器用sass，其他大同小異。

用create-react-app創建項目，執行npm run eject彈出配置文件（此操作不可逆）；

配置sass，用的最新的CRA，webpack4；

webpack.config.dev.js （webpack.config.prod.js需相同配置一份）:

module下的rules 中 oneOf 修改&增加 

{
            // Exclude `js` files to keep "css" loader working as it injects
            // its runtime that would otherwise processed through "file" loader.
            // Also exclude `html` and `json` extensions so they get processed
            // by webpacks internal loaders.
            exclude: [/\.(js|jsx|mjs)$/, /\.html$/, /\.json$/, /\.sass$/, /\.scss$/],
            loader: require.resolve('file-loader'),
            options: {
              name: 'static/media/[name].[hash:8].[ext]',
            },
          },
          {
            test: /\.(scss|sass)$/,
            use: [
              'style-loader',
              { loader: 'css-loader', options: { importLoaders: 1,modules: true } },
              'sass-loader'
            ]
            // loaders: ['style-loader', 'css-loader', 'sass-loader']
          }

其中modules: true 意思是開啓模塊化css處理

 

css：

.body
    border: 1px solid red   
.body-wrapper
    border: 2px solid red

頁面引入：

import indexCss from '../../css/style.scss';

使用：

className={indexCss.body}

className={indexCss["body-wrapper"]}

注意className帶符號的 要用indexCss["body-wrapper"]這種形式

效果可以看到 class name都加上了編譯：

有些樣式不需要編譯，就要:global(className)來標識這個類是全局類名，因此CSS Modules不對其類名進行轉化：

結構：

import React, { Component } from "react";
import indexCss from '../../css/style.scss';

export default class Index extends Component{
    render() {
        return(
            <div className={indexCss["body-wrapper"]}>
                <div className={indexCss.body}>
                    <span>關於我們</span>
                    <span className={indexCss.name}>name</span>
                </div>
                <div className="title">title標題</div>
            </div>
        );
    }
}

樣式：

.body{
    border: 1px solid red;
}
.body-wrapper{
    padding: 50px;
    border: 2px solid red;
    .name{
        color: red;
    }
}
:global(.title) {
    color: blue
}

效果：