VueJS Rollup 导出多个 scss 资源

Posted 2023-02-22

【中文标题】VueJS Rollup 导出多个 scss 资源

【英文标题】：VueJS Rollup export multiple scss resources

【发布时间】：2020-12-19 15:33:51

【问题描述】：

是否可以使用 Rollup for Vue 导出多个 (s)css 资源？ 我想要完成的是：

components.scss

从 src/components/**/*.vue 中提取 <style lang="scss">（包括 @import 文件）。

components.css

使用 tailwindcss 和 autoprefixer 解析 components.scss。

theme.scss

默认的通用主题样式（按钮等）

theme.css

使用 tailwindcss 和 autoprefixer 解析了 theme.scss

到目前为止，我已经设法使用 rollup-plugin-bundle-scss 捆绑了 dist/components.scss，但我不确定如何添加其他文件。如果我在我的 index.js 条目文件中导入 theme.scss，它也会被添加到包中，这不是我想要的。我可以在 package.json 中公开 src/assets/theme.scss 但我仍然需要一个解析的版本

如果有办法在捆绑之前复制 components.scss，那也是一个不错的选择。

我的 rollup.config.js 的一部分

 plugins: [      
  bundleScss(output: 'components.scss', exclusive: false ),
  scss(),
  postcss(),
  resolve( extensions: ['.js', '.jsx', '.ts', '.tsx', '.vue'] ),
  vue(  css: true )
 ]

postcss.config.js

const autoprefixer = require('autoprefixer');
const tailwindcss = require('tailwindcss');

module.exports = 
  plugins: [
    tailwindcss,
    autoprefixer,
  ],
;

关于如何实现这一点的任何想法？

【参考方案1】：

我想我只是自欺欺人了。发布此内容后，我注意到一个包含多个导出条目的示例配置，因此我添加了一个以 theme.scss 作为输入的配置条目。输出符合预期。

我不喜欢的一件事是构建过程会触发警告

发出的文件“theme.css”会覆盖之前发出的文件 同名。

意思是输出被写了两次，我不知道为什么会这样或者是否可以忽略它。

const cssOnlyConfig = 
  input: 'src/assets/theme.scss',
  output: 
    file: 'dist/theme.css',
    format: 'es',
    exports: 'default'
  ,
  plugins: [
    postcss(
      modules: false,
      extract: true
    ),
    vue(
      css:true,
    ),
  ],
;