Question

我目前在尝试使用roll up.js将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(),
  ]
}

如果需要的话，似乎还有更多选择来增强它。

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

1 个答案: