如何在带有 rollup.js 的包中包含 css 无法加载 css 文件 - 意外令牌

Question

我目前在尝试使用 roll up.js 在组件库中捆绑/加载 CSS 文件时遇到错误。我不断遇到意外的令牌错误，这让我相信它无法识别扩展名。我including在 babel 插件中尝试过CSS 文件，但没有用。添加postcss插件导致我收到此错误而不是我以前的错误，Can not resolve DropDown.css但现在我被卡住了。有任何想法吗？

错误：

[!] (babel plugin) SyntaxError: /Users/adam.mateo/Documents/code/quovo-app/shared-components/components/DropDown/DropDown.css: Unexpected token (1:0)
components/DropDown/DropDown.css (1:0)
SyntaxError: /Users/adam.mateo/Documents/code/quovo-app/shared-components/components/DropDown/DropDown.css: Unexpected token (1:0)
> 1 | .Dropdown-root {
    | ^
  2 |   position: relative;
  3 | }
  4 | 

我的 rollup.config：

import babel from 'rollup-plugin-babel';
import commonjs from 'rollup-plugin-commonjs';
import postcss from 'rollup-plugin-postcss';

export default {
  input: 'components/index.js',
  output: {
    file: 'dist/main.js',
    format: 'cjs',
  },
  plugins: [
    babel({
      babelrc: false,
      exclude: 'node_modules/**',
      plugins: [
        'transform-object-rest-spread',
        // 'external-helpers',
      ],
      presets: [
        'react',
        ['env', { 'modules': false }],
      ],
    }),
    postcss({
       extensions: ['.css'],
    }),
    commonjs(),
  ]
}

Answer 1

我为此使用了一个单独的插件：rollup-plugin-scss。它捕获.css在组件中导入的所有备用文件，并聚合到作为汇总输出包一部分的单个 CSS 包中。

一个符合我需要的非常简单的配置，如下所示：

import scss from 'rollup-plugin-scss'
...

export default {
  input: 'src/index.tsx',
  output: [...],
  plugins: [
    ...
    scss(),
  ]
}

如果需要，似乎有更多选项可以增强它。