时间戳

首页 > 解决方案 > 如何在带有 rollup.js 的捆绑包中包含 css 无法加载 css 文件 - 意外的令牌

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

问题描述

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

标签： cssbabeljsrollupjs

解决方案

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

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

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

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

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

推荐阅读