汇总-如何在JS目标文件夹外编写CSS

问题描述

svelte使用汇总来捆绑。这是文件夹结构。

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()传递到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',...
     ],...