react配置less,并使用less module（webpack.config.js配置）

imingyu 發(fā)布于2019-08-23 17:04 / 2279人閱讀

摘要：網(wǎng)上看了很多配置，最后才發(fā)現(xiàn)后就不用就可以使用特性，那么仿照的配置即可的使用將文件名為配置暴露配置文件安裝依賴修改文件配置，一共修改三處第一處增加定義變量第二處仿照配置第三處修改函數(shù)內(nèi)部，增加圖片描述測試是否安裝成功

網(wǎng)上看了很多配置，最后才發(fā)現(xiàn)create-react-app2.0后就不用eject就可以使用css module特性，那么less仿照css的配置即可

1.css module的使用 將CSS文件名為[filename].module.css import styles from "./index.module.css"; 2.配置less

暴露webpack配置文件

cnpm run eject

安裝lessless-loader依賴

npm install less less-loader --save-dev

修改webpack.config.js文件配置，一共修改三處

第一處：增加定義變量

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

第二處：仿照css配置less
```
{
                            test: cssRegex,
                            exclude: cssModuleRegex,
                            use: getStyleLoaders({
                                importLoaders: 1,
                                sourceMap: isEnvProduction && shouldUseSourceMap,
                            }),
                            // 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 (https://github.com/css-modules/css-modules)
                        // using the extension .module.css
                        {
                            test: cssModuleRegex,
                            use: getStyleLoaders({
                                importLoaders: 1,
                                sourceMap: isEnvProduction && shouldUseSourceMap,
                                modules: true,
                                getLocalIdent: getCSSModuleLocalIdent,
                            }),
                        },

                        // Opt-in support for SASS (using .scss or .sass extensions).
                        // By default we support SASS Modules with the
                        // extensions .module.scss or .module.sass



                        {
                            test: lessRegex,
                            exclude: lessModuleRegex,
                            use: getStyleLoaders({
                                importLoaders: 1,
                                sourceMap: isEnvProduction && shouldUseSourceMap,
                            }),
                            // 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 (https://github.com/css-modules/css-modules)
                        // using the extension .module.css
                        {
                            test: lessModuleRegex,
                            use: getStyleLoaders({
                                importLoaders: 1,
                                sourceMap: isEnvProduction && shouldUseSourceMap,
                                modules: true,
                                getLocalIdent: getCSSModuleLocalIdent,
                            }),
                        },
```
第三處：修改getCSSModuleLocalIdent函數(shù)內(nèi)部，增加less

![圖片描述][2]

3測試是否安裝成功

建立以module.less為結(jié)尾的less文件

通過module引入less到index

import styles from "./my.module.less"

    render() {
        console.log(styles.text)
        return (
            
                Hello World
            
        )
    }