create-react-app使用less

最新推荐文章于 2024-07-18 15:38:06 发布

chengchaoyue28

最新推荐文章于 2024-07-18 15:38:06 发布

阅读量272

点赞数 4

文章标签： react.js less 前端

本文链接：https://blog.csdn.net/chengchaoyue28/article/details/138465298

版权

本文介绍了如何在React项目中安装并配置less-loader，更新webpack.config.js以支持LESS文件，并处理了Babelpresetreact-app中的环境变量和ESLint的parser问题。

摘要由CSDN通过智能技术生成

安装 less

npm i less less-loader --save-dev

修改 webpack.config.js

暴露webpack配置

npm run eject

改动部分

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

           {
              test: sassRegex,
              exclude: sassModuleRegex,
              use: getStyleLoaders(
                {
                  importLoaders: 3,
                  sourceMap: isEnvProduction
                    ? shouldUseSourceMap
                    : isEnvDevelopment,
                  modules: {
                    mode: 'icss',
                  },
                },
                'sass-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: sassModuleRegex,
              use: getStyleLoaders(
                {
                  importLoaders: 3,
                  sourceMap: isEnvProduction
                    ? shouldUseSourceMap
                    : isEnvDevelopment,
                  modules: {
                    mode: 'local',
                    getLocalIdent: getCSSModuleLocalIdent,
                  },
                },
                'sass-loader'
              ),
            },
            /---------------新增less-loader-----------------/ 
            {
              test: lessRegex,
              exclude: lessModuleRegex,
              use: getStyleLoaders({
                      importLoaders: 1,// 值是1
                      modules: true, // 增加这个可以通过模块方式来访问css
                      sourceMap: isEnvProduction
                      ? shouldUseSourceMap
                      : isEnvDevelopment,
                  },
                  "less-loader"
              ),
              sideEffects: true
            }, 
            {
              test: lessModuleRegex,
              use: getStyleLoaders({
                      importLoaders: 1,
                      sourceMap: isEnvProduction
                      ? shouldUseSourceMap
                      : isEnvDevelopment,
                      modules: true,
                      getLocalIdent: getCSSModuleLocalIdent
                  },
                  "less-loader"
              )
            },
            /---------------新增less-loader-----------------/

产生eslint问题

1.Using `babel-preset-react-app` requires that you specify `NODE_ENV` or `BABEL_ENV` environment variables. Valid values are "development", "test", and "production". Instead, received: undefined.

解决1：导致产生问题2

  "eslintConfig": {
    "extends": [
      "react-app",
      "react-app/jest"
    ],
    /------------新增------------/
    "parserOptions": {
      "babelOptions": {
        "presets": [
          ["babel-preset-react-app", false]
        ]
      }
    }
  },

2.Parsing error: This experimental syntax requires enabling one of the following parser plugin(s): "jsx", "flow", "typescript".

"eslintConfig": {
    "extends": [
      "react-app",
      "react-app/jest"
    ],
    "parserOptions": {
      "babelOptions": {
        "presets": [
          ["babel-preset-react-app", false],
          /----------------新增-------------------/ 
          "babel-preset-react-app/prod"
        ]
      }
    }
  },