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

Question

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

我运行“npm 运行弹出”。然后我安装了 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,
    },

然后我在尝试运行:

时收到此错误消息

Failed to compile ./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"; ^ Unrecognised input Error in G:\Work Projects\uno\src\styles\index.less (line 1, column 15)

Answer 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

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

Using LESS CSS with the latest Create React App

css

less

reactjs

webpack