优化解决方法！rollup-plugin-postcss 无忧导入 less

2024-01-16 03:29:14

正文

问题背景

在使用 Rollup.js 和 rollup-plugin-postcss 处理 LESS 文件时，你可能会遇到 "~@xxxxx/src/index.less' wasn't found" 的错误。这是因为 rollup-plugin-postcss 不支持 LESS 的 @import 语法。

解决方案

解决方案一：使用 less-plugin-npm-import 插件

less-plugin-npm-import 是一个 LESS 插件，可以解析 @import 语法并将其转换为 CSS。你可以通过以下步骤使用 less-plugin-npm-import：

安装 less-plugin-npm-import 插件：

npm install --save-dev less-plugin-npm-import

在你的 LESS 文件中添加以下代码：

@import "~@xxxxx/src/index.less";

在你的 Rollup.js 配置文件中，添加以下代码：

import less from "rollup-plugin-less";
import lessPluginNpmImport from "less-plugin-npm-import";

export default {
  input: "src/index.js",
  output: {
    file: "dist/bundle.js",
    format: "cjs",
  },
  plugins: [
    less({
      plugins: [lessPluginNpmImport()],
    }),
  ],
};

解决方案二：使用 webpack-less-loader

webpack-less-loader 是一个 webpack 加载器，可以解析 @import 语法并将其转换为 CSS。你可以通过以下步骤使用 webpack-less-loader：

安装 webpack-less-loader 加载器：

npm install --save-dev webpack-less-loader

在你的 webpack 配置文件中，添加以下代码：

module.exports = {
  module: {
    rules: [
      {
        test: /\.less$/,
        use: [
          "style-loader",
          "css-loader",
          "less-loader",
        ],
      },
    ],
  },
};