问答博客资讯标签用户活动
logo极客观点logo项目管理logoHarmonyOS
开发者社区
javascript
前端
python
node.js
react
vue.js
php
laravel
go
人工智能
mysql
linux
ios
java
android
css
typescript
spring
程序员
logoONES 研发管理logo思否企业问答logo安谋科技 XPU

rollup打包vue2组件库时 如何引入公共的variable.less 并且在生成时 生成index.css?

头像
_SYY_
    4932132
    广西桂林市

    利用rollup打包vue组件库时 如何引入公共的variable.less文件 并且在生成的时候生成对应的less文件?

    以下是文件目录
    image.png

    import vue from "rollup-plugin-vue";
import css from "rollup-plugin-css-only";
import less from "rollup-plugin-less";
import { terser } from "rollup-plugin-terser";
import postcss from "rollup-plugin-postcss";
import { getProjectPath } from "./utils";

export default {
  input: ["packages/index.js"],
  output: [
    {
      file: "lib/index.js", // 输出的文件名
      format: "umd", // 输出格式，可选 'umd', 'cjs', 'es'
      name: "opu", // 当 format 为 'umd' 时，用来挂载到window上的全局变量名
    },
    {
      file: "lib/index.min.js", // 压缩后的文件名
      format: "umd",
      name: "opu",
      plugins: [terser()], // 使用 terser 插件进行压缩
    },
  ],
  plugins: [
    vue(),
    css({ output: "index.css" }),
    less({
      // 你可以在这里配置 Less 选项，例如:
      raw: true, // 输出原始的 less 代码，而不是编译后的 css
      modifyVars: { "@white": "#fff" }, // 修改 less 变量
      outputStyle: "compressed", // 输出压缩的 CSS (less 的编译选项)
      sourceMap: true, // 生成 source map
      extractCSS: true, // 将 CSS 提取到单独的文件中
    }),
    postcss({
      extensions: [".less"],
      use: ["less"],
      inject: true,
      extract: "[name].css", // 输出的CSS文件名
      plugins: [
        // 添加postcss插件以引入公共的variable.less文件
        require("postcss-import")({
          path: [getProjectPath("./packages/styles/variable.less")],
        }),
      ],
    }),
  ],
  external: [
    //  声明排除打包的三方依赖
    "vue",
    "vant",
    "moment",
    "lodash",
  ],
};

    试了rollup-plugin-less 和 rollup-plugin-postcss 打包的时候依然报错 判断没有@white这个less变了
    要如何写才能正常引入?
    还有一个问题是 如何才能把这些less文件在打包index.js的同时 打包出一个index.css文件?

    前端javascriptrollup
    阅读 1k
    avatarAI BotBETA

    首先，我注意到你试图在 Rollup 配置中使用 postcss-import 插件来引入 variable.less 文件。然而，postcss-import 插件可能无法在 Rollup 配置中正确工作，因为它是设计来处理 PostCSS 任务的，而不是 Rollup 的任务。

    在 Rollup 中，你应该使用 rollup-plugin-less 插件来处理 .less 文件，并确保正确地导入你的 variable.less 文件。

    以下是一个可能的解决方案，你可以尝试在 rollup-plugin-less 的配置中添加 @import 语句来导入你的 variable.less 文件：

    less({
  raw: true,
  modifyVars: { "@white": "#fff" },
  outputStyle: "compressed",
  sourceMap: true,
  extractCSS: true,
  plugins: [
    // 在这里添加一个 @import 语句来导入你的 variable.less 文件
    // 注意：你需要根据 variable.less 文件的实际路径来调整这个路径
    function() {
      this.addImport(["./packages/styles/variable.less"]);
    }
  ]
})

    在这个示例中，我假设 variable.less 文件位于 ./packages/styles/ 目录下。你需要根据你的实际情况调整这个路径。

    至于你的第二个问题，关于如何在打包 index.js 的同时生成 index.css 文件，你可以使用 rollup-plugin-css-only 插件来处理 CSS 输出。你已经正确地在配置中使用了这个插件，并且已经设置了 output 选项为 "index.css"。因此，当你运行 Rollup 时，它将生成一个 index.css 文件作为输出。如果你遇到任何问题，请检查你的 Rollup 配置和运行命令是否正确。

    撰写回答
    你尚未登录，登录后可以
    • 和开发者交流问题的细节
    • 关注并接收问题和回答的更新提醒
    • 参与内容的编辑和改进，让解决方法与时俱进
    推荐问题