在create-react-app中配置less

最新推荐文章于 2023-12-10 16:02:48 发布

原创最新推荐文章于 2023-12-10 16:02:48 发布 · 504 阅读

0 ·

CC 4.0 BY-SA版权

本文介绍了如何在create-react-app项目中配置less，包括安装less和less-loader，修改webpack配置，以及验证配置是否成功的方法。

首先在终端中写npm i --save-dev less less-loader。安装less、less-loader两个包
在终端中写npm run eject，暴露webpack。【在暴露配置的时候可能会出错，因为本地没有文件仓库。git add . git commit -m 'up'用git将项目添加到本地仓库】
在项目文件夹中会出现config文件夹，其中会有webpack.config.js文件。
在 webpack.config.js 中 “style files regexes” (58行) 添加 less ==》即照着Sass改一份Less的

const lessRegex = /\.less$/;
const lessModuleRegex = /\.module\.less$/;

修改后

5.在‘sass-loader’后面添加代码

{
              test: lessRegex,
              exclude: lessModuleRegex,
              use: getStyleLoaders(
                {
                  importLoaders: 2,
                  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,
            },
            // Adds support for CSS Modules, but using SASS
            // using the extension .module.scss or .module.sass
            {
              test: lessModuleRegex,
              use: getStyleLoaders(
                {
                  importLoaders: 2,
                  sourceMap: isEnvProduction && shouldUseSourceMap,
                  modules: true,
                  getLocalIdent: getCSSModuleLocalIdent,
                },
                'less-loader'
              ),
            },

在这里插入图片描述

此时less就配置成功了，可以测验一下是否成功
在src文件夹下创建test.less

@themeColor: #17B3A3;
p{
  background: @themeColor;      //使用Less或者Sass是注意结束的 ;
  span{
    color: #fcc;
  }
}

在App.js中引入使用

import React from 'react';
import './test.less'
 
function App() {
  return (
    <div className="App">
      <header className="App-header">
        <p className='box'>
          React.
          <span>你好</span>
        </p>
      </header>
    </div>
  );
}
 
export default App;