javascript - rollup - 如何在 JS 目标文件夹之外编写 CSS
问题描述
Svelte 使用 Rollup 进行捆绑。这是文件夹结构。
svelte/
├── node_modules/
├── public/
│ ├── bundle.js
│ └── bundle.css
├── src/
│ ├── App.svelte
│ └── main.js
└── rollup.config.js
我想同时保存根文件夹bundle.js
和bundle.css
根文件夹之外。
这是汇总配置。
input: "src/main.js",
output: {
format: "cjs",
name: "app",
file: "../../src/svelte/bundle.js",
},
plugins: [
svelte({
css: (css) => {
css.write("/bundle.css");
},
}),
],
我可以保存bundle.js
罚款,但传递给css.write()
for的路径bundle.css
是相对于bundle.js
目标目录的。
如果我尝试这样做css.write("../bundle.css")
,我会收到此错误...
Error: The "fileName" or "name" properties of emitted files must be strings that are neither absolute
nor relative paths and do not contain invalid characters, received "/bundle-svelte-activities.css".
解决方案
这里有一些片段来实现它:
...
import css from 'rollup-plugin-css-asset';
export default {
input: 'src/main.js',
output: {
sourcemap: true,
format: 'iife',
name: 'app',
assetFileNames: 'bundle.css',
dir: 'public/build',
entryFileNames: 'bundle.js'
},
plugins: [
svelte({
...
emitCss: true,
}),
...
css({
name: 'bundle',
}),
...
],
...
推荐阅读
- web-crawler - Apache Nutch 1.17,将带有一些元数据的解析内容转储为 JSON
- laravel - Laravel 护照:分配范围以访问令牌覆盖 oauth/令牌路由
- python - Python 如何支持这个与运行时多态性相关的常见问题?
- java - WSL Bash 在 PATH 中找不到 java
- php - 对自定义 symfony 约束进行单元测试
- javascript - 使用带有负值的accounting.FormatMoney,Accounting.js
- javascript - 防止 .map 为不符合特定条件的值返回 undefined
- python - 我有一个python代码,在打印二维列表的最后一行打印了很多次,输出错误,我是初学者
- javascript - 如何在javascript中返回对象数组?
- laravel - 导入excel文件laravel时字段'id'没有默认值