在最新的 Create React App 中使用 LESS CSS

Posted 2023-02-22

【中文标题】在最新的 Create React App 中使用 LESS CSS

【英文标题】：Using LESS CSS with the latest Create React App

【发布时间】：2020-12-02 19:12:23

【问题描述】：

我在网上找到的所有东西似乎都是旧的，似乎对我不起作用。感谢任何帮助。

我运行了“npm runeject”。然后我用 NPM 安装了

"devDependencies": 
   "less": "^3.12.2",
   "less-loader": "^6.2.0"
 ,

在我的“webpack.config.js”文件中，这是我目前拥有的：

module: 
  strictExportPresence: true,
  rules: [
    
      test: /\.less$/,
      loader: 'less-loader', // compiles Less to CSS
    ,
    // Disable require.ensure as it's not a standard language feature.
     parser:  requireEnsure: false  ,

    // First, run the linter.
    // It's important to do this before Babel processes the JS.
    
      test: /\.(js|mjs|jsx|ts|tsx)$/,
      enforce: 'pre',
      use: [
        
          options: 
            cache: true,
            formatter: require.resolve('react-dev-utils/eslintFormatter'),
            eslintPath: require.resolve('eslint'),
            resolvePluginsRelativeTo: __dirname,
            
          ,
          loader: require.resolve('eslint-loader'),
        ,
      ],
      include: paths.appSrc,
    ,

然后我在尝试运行时收到此错误消息：

编译失败 ./src/styles/index.less (./node_modules/css-loader/dist/cjs.js!./node_modules/less-loader/dist/cjs.js!./node_modules/file-loader/dist/cjs.js??ref--7-oneOf -7!./src/styles/index.less)

module.exports = webpack_public_path + “静态/媒体/索引.1f54121a.less”； ^ 无法识别的输入 G:\Work Projects\uno\src\styles\index.less 中的错误（第 1 行，第 15 列）

【问题讨论】：

天哪，CRA webpack.config.js 文件是巨大的

【参考方案1】：

希望这对某人有所帮助。我在这里找到了答案：https://segmentfault.com/a/1190000018858055

Short Version:

const cssRegex = /\.(css|less)$/;
const cssModuleRegex = /\.module\.(css|less)$/;
...
...
...
// "postcss" loader applies autoprefixer to our CSS.
// "css" loader resolves paths in CSS and adds assets as dependencies.
// "style" loader turns CSS into JS modules that inject <style> tags.
// In production, we use MiniCSSExtractPlugin to extract that CSS
// to a file, but in development "style" loader enables hot editing
// of CSS.
// By default we support CSS Modules with the extension .module.css

  test: cssRegex,           // edited to add less above
  exclude: cssModuleRegex,  // edited to add less above
  use: getStyleLoaders(
    importLoaders: 2,       // changed from 1 to 2
    modules: true,          // added this line
    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 (https://github.com/css-modules/css-modules)
// using the extension .module.css

  test: cssModuleRegex,
  // etc

【讨论】：

您需要以任何方式编辑npm start 脚本吗？

仅供参考；对我来说 modules 不必添加（或设置为 false）