胖蔡说技术
随便扯扯

如何在React工程中配置less支持?

Less是css的一个变种,css的一个高级体现,与其类似的还有sass,都是一种编译型样式语言。这样的语言对于程序员而言,具有更高的可读性,理解起来也容易很多,层次性较好,这在这几年市场的选择也可以明显看出。如此,这就需要我们对当前的项目进行less依赖,从而让我们的项目支持less。

依赖下载

$yarn add less less-loader #或者
$npm install less less-loader

无论是less亦或者是sass都是通过对文件的编译生成新的css的过程。因此,如果我们想要库能实现less支持,需要先加载基础的依赖库。

修改配置文件

依赖安装好了后,我们还需要修改我们的less配置,以实现webpack在打包时同时编译打包less文件,想要修改配置需得先将配置文件找到,webpack脚手架为安全考虑,默认是将config文件隐藏。因此,我们需要先暴露配置文件,然后再修改配置。

  • 获取配置文件

获取配置文件可通过如下脚本触发。

$yarn eject

  • 修改config/webpack.config.js

我们需要在webpack.config.js中添加css的模块规则,配置类似其中的css配置方式:

const cssRegex = /\.css$/;
const cssModuleRegex = /\.module\.css$/;
const sassRegex = /\.(scss|sass)$/;
const sassModuleRegex = /\.module\.(scss|sass)$/;
//我们添加的less配置
const lessRegex = /\.less$/;
const lessModuleRegex = /\.module\.less$/;
......
{
                            test: lessRegex,
                            exclude: lessModuleRegex,
                            use: getStyleLoaders({
                                    importLoaders: 3,
                                    sourceMap: isEnvProduction && shouldUseSourceMap,
                                },
                                'less-loader'
                            ),
                            // 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,
                        }, {
                            test: lessModuleRegex,
                            use: getStyleLoaders({
                                    importLoaders: 3,
                                    sourceMap: isEnvProduction && shouldUseSourceMap,
                                    modules: {
                                        getLocalIdent: getCSSModuleLocalIdent,
                                    },
                                },
                                'less-loader'
                            ),
                        },

使用

如此就完成了less在react中的配置,实现了react中支持less文件。之后我们就可以创建less并在js中导入less文件来生效样式。

/**index.less **/

body{
  font-size:14px;
  height:100%;
  .main {
     max-width:1200px;
     height:100%;
  }
}
赞(0) 打赏
转载请附上原文出处链接:胖蔡说技术 » 如何在React工程中配置less支持?
分享到: 更多 (0)

请小编喝杯咖啡~

支付宝扫一扫打赏

微信扫一扫打赏