React：怎么配置使用less

React怎么配置使用less

React暴露配置

yarn eject

安裝less模塊（注意less-loader的版本）

yarn add less less-loader@6.2.0 -D

配置webpack.config.js

添加lessRegex變量

const cssRegex = /\.css$/;
const cssModuleRegex = /\.module\.css$/;
const sassRegex = /\.(scss|sass)$/;
const sassModuleRegex = /\.module\.(scss|sass)$/;
const lessRegex = /\.(less)$/;  // 新增
const lessModuleRegex = /\.module\.(less)$/;  // 新增

修改getStyleLoaders方法，該方法無法配置loader為preProcessor的options參數，所以該方法優化后如下：

    // 新增一個preProcessorOption參數
    const getStyleLoaders = (cssOptions, preProcessor, preProcessorOption) => {  
        const loaders = [
            isEnvDevelopment && require.resolve('style-loader'),
            isEnvProduction && {
                loader: MiniCssExtractPlugin.loader,
                options: paths.publicUrlOrPath.startsWith('.')
                    ? {publicPath: '../../'}
                    : {},
            },
            {
                loader: require.resolve('css-loader'),
                options: cssOptions,
            },
            {
                loader: require.resolve('postcss-loader'),
                options: {
                    ident: 'postcss',
                    plugins: () => [
                        require('postcss-flexbugs-fixes'),
                        require('postcss-preset-env')({
                            autoprefixer: {
                                flexbox: 'no-2009',
                            },
                            stage: 3,
                        }),
                        postcssNormalize(),
                    ],
                    sourceMap: isEnvProduction ? shouldUseSourceMap : isEnvDevelopment,
                },
            },
        ].filter(Boolean);
        if (preProcessor) {
            loaders.push(
                {
                    loader: require.resolve('resolve-url-loader'),
                    options: {
                        sourceMap: isEnvProduction ? shouldUseSourceMap : isEnvDevelopment,
                        root: paths.appSrc,
                    },
                },
                {
                    loader: require.resolve(preProcessor),
                    // 當preProcessorOption為undefined，則保持原邏輯
                    // 當preProcessorOption不為空，則把preProcessorOption設置到options中
                    options: preProcessorOption === undefined ? {sourceMap: true,} : {
                        sourceMap: true,
                        ...preProcessorOption,
                    },
                }
            );
        }
        return loaders;
    };

新增rule，可以復制sassRegex的配置進行修改，修改后如下：

           {
                            test: lessRegex,
                            exclude: lessModuleRegex,
                            use: getStyleLoaders(
                                {
                                    importLoaders: 3,
                                    sourceMap: isEnvProduction
                                        ? shouldUseSourceMap
                                        : isEnvDevelopment,
                                },
                                'less-loader',
                                {
                                    lessOptions: {
                                        javascriptEnabled: true,
                                        modifyVars: { '@primary-color': '#1DA57A' },
                                    }
                                }
                            ),
                            // Don't consider CSS imports dead code even if the
                            // containing package claims to have no side effects.
                            // Remove this when webpack adds a warning or an error for this.
                            // See https://github.com/webpack/webpack/issues/6571
                            sideEffects: true,
                        },
                        // Adds support for CSS Modules, but using SASS
                        // using the extension .module.scss or .module.sass
                        {
                            test: lessModuleRegex,
                            use: getStyleLoaders(
                                {
                                    importLoaders: 3,
                                    sourceMap: isEnvProduction
                                        ? shouldUseSourceMap
                                        : isEnvDevelopment,
                                    // modules: true,
                                    // getLocalIdent: getCSSModuleLocalIdent,
                                    modules: {
                                        getLocalIdent: getCSSModuleLocalIdent,
                                    },
                                },
                                'less-loader',
                                {
                                    lessOptions: {
                                        javascriptEnabled: true,
                                        modifyVars: { '@primary-color': '#1DA57A' },
                                    }
                                }
                            ),
                        },

使用

由webpack配置文件得知，以less為后綴的樣式，使用方式如下：

// index.less
.demo {
  color: orange;
}

// App.tsx
import "./styles/index.less"; 
<p className={"demo"}>這是橙色的文字</p>

以module.less為后綴的樣式，使用方式如下：

// index.module.less
.demo {
  color: orange;
}

// App.tsx
import styles from "./styles/index.module.less";
<p className={styles.demo}>這是橙色的文字</p>

// 需要在react-app-env.d.ts新增以下內容，否則在App.tsx導入時會編譯失敗
declare module '*.module.less' {
  const classes: {[key: string]: string};
  export default classes;
}