将 LESS 文件转换为 CSS 模块

Question

我正在尝试将 LESS 文件的遗留代码库转换为 CSS 模块。

我更新了 webpack 的

css-loader

，如下所示：

{
  loader: 'css-loader',
  options: {
    modules: {
      // for now, only enable CSS modules for LESS files with ".module."
      auto: /\.module\.\w+$/i, 
      localIdentName: '[sha1:hash:hex:6]',
    },
  },
}

然后，我将 LESS 文件从

something.less

重命名为

something.module.less

我们代码库中的所有类名都是短横线大小写，虽然 CSS 模块更喜欢使用驼峰式命名，但您仍然可以通过执行

styles['some-class-name']

来访问它。

我的问题是客户端应用程序甚至没有构建。它不断抱怨一行中出现意外的标记，例如：

.user-profile-wrapper { // styles here }

所以我不必更改 LESS 文件的任何内容，但是很好，让我们删除烤肉串外壳。

然后，当我将其更改为

.wrapper { // styles here }

时，客户端应用程序构建成功，但现在我们的节点服务器在

unexpected token '.'

前面的点上给出

.wrapper {}

构建错误。

/path/to/app/styles/home/something.module.less:1
.wrapper {
^

SyntaxError: Unexpected token '.'
    at wrapSafe (node:internal/modules/cjs/loader:1378:20)
    at Module._compile (node:internal/modules/cjs/loader:1428:41)
    at Module._extensions..js (node:internal/modules/cjs/loader:1548:10)
    at Object.newLoader [as .js] (/path/to/app/node_modules/pirates/lib/index.js:121:7)
    at Module.load (node:internal/modules/cjs/loader:1288:32)
    at Function.Module._load (node:internal/modules/cjs/loader:1104:12)
    at Module.require (node:internal/modules/cjs/loader:1311:19)
    at require (node:internal/modules/helpers:179:18)
    at Object.<anonymous> (/path/to/app/components/home/MyComponent.tsx:6:1)
    at Module._compile (node:internal/modules/cjs/loader:1469:14)

有人知道可能出了什么问题吗？

Answer 1

在您提供的示例配置中缺少

less-loader

。 要将 LESS 文件编译为 CSS，需要额外的 less-loader。

安装

less-loader

：

npm install less less-loader --save-dev

将

less-loader

添加到您的 webpack 配置中：

module.exports = {
  module: {
    rules: [
      {
        test: /\.less$/i,
        use: [
          {
            loader: "css-loader",
            options: {},
          },
          {
            loader: "less-loader", // <= compiles Less to CSS
            options: {},
          },
        ],
      },
    ],
  },
};