gpt4 book ai didi

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

转载 作者:行者123 更新时间:2023-12-04 11:49:05 25 4
gpt4 key购买 nike

我目前在尝试使用 roll up.js 在组件库中捆绑/加载 CSS 文件时遇到错误。我不断遇到意外的 token 错误,这让我相信它无法识别扩展名。我试过 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(),
]
}

最佳答案

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

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

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

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

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

关于css - 如何在带有 rollup.js 的包中包含 css 无法加载 css 文件 - 意外 token ,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/52299758/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com