在 create-react-app 創建的項目中使用 less 模塊化 （配置webpack）

 

2020/05/21

        在create-react-app 腳手架創建的項目中，突然想到要用 less 的模塊化，但是 create-react-app 創建的項目只是自帶 css 模塊化。要使用 less 模塊化，需要自行配置

        首先，創建項目

create-react-app test

        然後，把 react 腳手架的配置彈射出來，並 npm run i 安裝項目依賴

npm run eject

        找到項目下 config/webpack.config.js，在 file-loader 之前加入這部分代碼

// less 開啓模塊化
            {
              test: /\.less$/,
              use: [
                {
                  loader: 'style-loader'
                },
                {
                  loader: 'css-loader',
                  exclude: /node_modules/,
                  options: {
                    modules: {
                      localIdentName: '[local]_[hash:base64:5]'
                    }
                  }
                },
                {
                  loader: 'less-loader'
                }
              ]
            },

        運行項目 npm run start，創建一個組件，並引用 less 樣式文件

import React, { Component } from 'react'
import styles from './index.less'

class Home extends Component {
    state = {  }
    render() { 
        return (
            <div>
                <p className={ styles.red }>Red</p>
                <p className={ styles.green }>Green</p>
            </div>
        );
    }
}
 
export default Home;

.red {color: red}
.green {color: green; font-size: 20px;}

        在瀏覽器審查元素，可以看到紅框中，類名後面增加了唯一的的字符串，類似 vue 裏面的樣式類名。css 模塊化最好的辦法就是 class 類名的唯一性

 

 -------------------------分割線-----------------------

2020/05/22 更新： 昨天做法能做到模塊化，但是也有問題，就是普通的引用 less 文件會失敗。可以先用之前的代碼配置，嘗試下下面的代碼，再回頭來看看這個新的。

import styles from './app.less'    // 成功引用
import './app.less'                // 這種就會引用失敗

       我重新看了下 create-react-app 的 webpack 配置，它自帶的 css 模塊化，是通過區分文件名來實現模塊化需求的，當你的文件名是 xxx.module.css 時，則對此文件開啓模塊化，需要 import styles from 'xxx.module.css' 這種方式來引用，普通引用 import 'xxx.module.css' 則無效。

        所以，我將昨天的 webpack 配置修改了下，如下代碼

// less 開啓模塊化
{
  test: /\.less$/,
  exclude: /node_modules|\.module\.less$/,  // 排除 xxx.module.less 模塊化文件
  use: [
    {
      loader: 'style-loader'
    },
    {
      loader: 'css-loader'
    },
    {
      loader: 'less-loader'
    }
  ]
},
{
  test: /\.module\.less$/,
  exclude: /node_modules/,
  use: [
    {
      loader: 'style-loader'
    },
    {
      loader: 'css-loader',
      options: {
        modules: {
          localIdentName: '[local]_[hash:base64:5]'
        }
      }
    },
    {
      loader: 'less-loader'
    }
  ]
},

        或者更更更更更更簡單的辦法，就是複製原有的 webpack 裏面的 sass 配置：

{
  test: /\.less$/,
  exclude: /\.module\.less$/,
  use: getStyleLoaders(
    {
      importLoaders: 3,
      sourceMap: isEnvProduction && shouldUseSourceMap,
    },
    'less-loader'
  ),
  sideEffects: true,
},
{
  test: /\.module\.less$/,
  use: getStyleLoaders(
    {
      importLoaders: 3,
      sourceMap: isEnvProduction && shouldUseSourceMap,
      modules: {
        getLocalIdent: getCSSModuleLocalIdent,
      },
    },
    'less-loader'
  ),
},