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

imingyu 发布于2019-08-23 17:04 / 2244人阅读

摘要：网上看了很多配置，最后才发现后就不用就可以使用特性，那么仿照的配置即可的使用将文件名为配置暴露配置文件安装依赖修改文件配置，一共修改三处第一处增加定义变量第二处仿照配置第三处修改函数内部，增加图片描述测试是否安装成功

网上看了很多配置，最后才发现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函数内部，增加less

![图片描述][2]

3测试是否安装成功

建立以module.less为结尾的less文件

通过module引入less到index

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

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

云服务器 GPU云服务器 html使用less less less2 linux密令less

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/103747.html

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

摘要：网上看了很多配置，最后才发现后就不用就可以使用特性，那么仿照的配置即可的使用将文件名为配置暴露配置文件安装依赖修改文件配置，一共修改三处第一处增加定义变量第二处仿照配置第三处修改函数内部，增加图片描述测试是否安装成功网上看了很多配置，最后才发现create-react-app2.0后就不用eject就可以使用css module特性，那么less仿照css的配置即可 1.css mo...

sPeng 2019-08-29 18:42 评论0 收藏0
React入门：从零搭建一个React项目

摘要：一初始化项目新建文件夹，文件名文件夹名称不要用，这类关键字，后面使用插件时会发生错误。未设置会报一个警告。四在项目中使用安装。一、初始化项目新建文件夹，文件名firstreact 文件夹名称不要用react，node这类关键字，后面使用插件时会发生错误。 init项目环境，项目信息可默认或自行修改 mkdir firstreact cd firstreact npm ...

stackvoid 2019-08-23 15:20 评论0 收藏0
快速搭建 webpack + react 环境

安装首先你需要点击这里安装 nodejs（npm）。然后执行：建立一个目录作为项目根目录并初始化： mkdir react-webpack cd react-webpack/ npm init 安装相关组件这里包括了本文所需要的全部组件 npm i --save-dev react react-dom react-transform-hmr webpack webpack-dev-serve...

孙淑建 2019-08-23 11:52 评论0 收藏0
从零开始配置webpack(基于babel 7版本)

摘要：支持转义转义需要的依赖，支持装饰器。在中增加的配置数组中。压缩文件安装依赖在中的中增加配置打包前先清空输出目录在中增加的配置至此，配置已经基本能满足需求。 webpack 核心概念: Entry: 入口 Module:模块，webpack中一切皆是模块 Chunk:代码库，一个chunk由十多个模块组合而成，用于代码合并与分割 Loader:模块转换器，用于把模块原内容按照需求转换成...

waltr 2019-08-23 16:09 评论0 收藏0
Webpack

摘要：简介是一款加载器兼容打包工具。所有的静态资源都可以是模块引用，而不仅仅是文件了。便捷开发，能够替代部分的的工作。扩展性强，插件机制完善。核心概念一个可执行模块或库的入口文件。插件，用于扩展的功能，在构建生命周期的节点上加入扩展为加入功能。简介 WebPack是一款加载器兼容打包工具。可以处理各种资源：JS(JSX),coffee，less/sass，图片等。静态资源打包工具出色的前端...

diabloneo 2019-08-20 10:21 评论0 收藏0