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

Question

我目前运行在尝试使用 roll up.js bundle/load 组件库中的 CSS 文件时遇到错误。我将运行置于意外的标记错误中，这让我相信它无法识别扩展名。我在 babel 插件中尝试了 including 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(),
  ]
}

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

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

How to include css in bundle w/ rollup.js Unable to load css files - Unexpected token

css

babeljs

rollupjs

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

How to include css in bundle w/ rollup.js Unable to load css files - Unexpected token

css

babeljs

rollupjs

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