结合使用LESS CSS和最新的Create React App

编程问答 2022-11-01

问题描述

我在网上找到的所有内容似乎都是旧的，似乎对我不起作用。任何帮助，我们都很感激。

我运行了“ npm run弹出”。然后我安装了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 + “ static / media / index.1f54121a.less”； ^无法识别的输入 G：\ Work Projects \ uno \ src \ styles \ index.less中的错误（第1行，第15列）

解决方法

希望这对某些人有所帮助。我在这里找到了答案：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
lessreactjsreactjsreactjsreactjswebpackwebpackwebpack