Javascript .css文件未添加到具有汇总功能的仅js库构建中的发行版中

我正在编写JS库，作为JS库的基础

“版本”：“1.29.0”

它有

main.js

文件和

main.css

文件，没有

html

文件。

main.js

文件都是关于DOM操作的，

main.css

文件在实现步骤中是必需的，以便轻松集成这个js库，而不是给用户一个指令

我觉得它的.css文件没有创建，因为树震动，因为css没有在这个JS库中使用

电流分布

-dist
--my-faceapi-js-lib.cjs.js
--my-faceapi-js-lib.esm.js
--my-faceapi-js-lib.umd.js

-dist
--my-faceapi-js-lib.cjs.js
--my-faceapi-js-lib.esm.js
--my-faceapi-js-lib.umd.js
--my-faceapi-js-lib.css

预期分布

-dist
--my-faceapi-js-lib.cjs.js
--my-faceapi-js-lib.esm.js
--my-faceapi-js-lib.umd.js

-dist
--my-faceapi-js-lib.cjs.js
--my-faceapi-js-lib.esm.js
--my-faceapi-js-lib.umd.js
--my-faceapi-js-lib.css

将

main.css

文件复制到

dist

文件夹中是不需要的，因为它没有缩小

rollup.config.js

import resolve from '@rollup/plugin-node-resolve';
import commonjs from '@rollup/plugin-commonjs';
import pkg from './package.json';
//import copy from 'rollup-plugin-copy'
//import postcss from 'rollup-plugin-postcss'

export default [
    {
        input: 'src/main.js',
        output: {
            name: 'howLongUntilLunch',
            file: pkg.browser,
            format: 'umd'
        },
        plugins: [
            resolve(), // so Rollup can find `ms`
            commonjs() // so Rollup can convert `ms` to an ES module
        ]
    },{
        input: 'src/main.js',
        output: [
            { file: pkg.main, format: 'cjs' },
            { file: pkg.module, format: 'es' }
        ]
    }
];

import resolve from '@rollup/plugin-node-resolve';
import commonjs from '@rollup/plugin-commonjs';
import pkg from './package.json';
import postcss from 'rollup-plugin-postcss'
import path from 'path'

export default [
    {
        input: 'src/main.js',
        output: {
            name: 'my-faceapi-js-lib',
            file: pkg.browser,
            format: 'umd'
        },
        plugins: [
            postcss({
                minimize: true,
                extensions: ['.css'],
                extract: path.resolve('dist/face-auth-rnd.css'),
            }),
            resolve(), // so Rollup can find `ms`
            commonjs() // so Rollup can convert `ms` to an ES module
        ]
    },
    {
        input: 'src/main.js',
        external: ['./main.css'],
        output: [
            { file: pkg.main, format: 'cjs' },
            { file: pkg.module, format: 'es' }
        ]
    }
];

main.js

import * as faceapi from "face-api.js";
...
...
...
import 'main.css';
...
...

---

基本上，JS库本身没有使用

main.css

。但是，在集成此库时，这是必要的。

您需要使用该插件（您已经拥有它，但它已被注释）：

//rollup.config.js
从“汇总插件PostCs”导入PostCs
从“路径”导入路径
导出默认值{
插件：[
邮政编码({
extract:path.resolve（'dist/myfaceapi js lib.css'），
插件：[]
})
]
}

您需要使用该插件（您已经拥有该插件，但它已被注释）：

//rollup.config.js
从“汇总插件PostCs”导入PostCs
从“路径”导入路径
导出默认值{
插件：[
邮政编码({
extract:path.resolve（'dist/myfaceapi js lib.css'），
插件：[]
})
]
}

问题已在将汇总版本从

1.29.0更新为
2.26.3后得到修复`
（同时更新相关包以汇总库-不确定是否与修复相关）

并且在添加了
['./main.css']之后，
作为外部


    {
        input: 'src/main.js',
        external: ['./main.css'],
        output: [
            { file: pkg.main, format: 'cjs' },
            { file: pkg.module, format: 'es' }
        ]
    }

rollup.config.js

import resolve from '@rollup/plugin-node-resolve';
import commonjs from '@rollup/plugin-commonjs';
import pkg from './package.json';
//import copy from 'rollup-plugin-copy'
//import postcss from 'rollup-plugin-postcss'

export default [
    {
        input: 'src/main.js',
        output: {
            name: 'howLongUntilLunch',
            file: pkg.browser,
            format: 'umd'
        },
        plugins: [
            resolve(), // so Rollup can find `ms`
            commonjs() // so Rollup can convert `ms` to an ES module
        ]
    },{
        input: 'src/main.js',
        output: [
            { file: pkg.main, format: 'cjs' },
            { file: pkg.module, format: 'es' }
        ]
    }
];

import resolve from '@rollup/plugin-node-resolve';
import commonjs from '@rollup/plugin-commonjs';
import pkg from './package.json';
import postcss from 'rollup-plugin-postcss'
import path from 'path'

export default [
    {
        input: 'src/main.js',
        output: {
            name: 'my-faceapi-js-lib',
            file: pkg.browser,
            format: 'umd'
        },
        plugins: [
            postcss({
                minimize: true,
                extensions: ['.css'],
                extract: path.resolve('dist/face-auth-rnd.css'),
            }),
            resolve(), // so Rollup can find `ms`
            commonjs() // so Rollup can convert `ms` to an ES module
        ]
    },
    {
        input: 'src/main.js',
        external: ['./main.css'],
        output: [
            { file: pkg.main, format: 'cjs' },
            { file: pkg.module, format: 'es' }
        ]
    }
];

将汇总版本从
1.29.0更新到
2.26.3后，问题已得到修复`
（同时更新相关包以汇总库-不确定是否与修复相关）

并且在添加了
['./main.css']之后，
作为外部


    {
        input: 'src/main.js',
        external: ['./main.css'],
        output: [
            { file: pkg.main, format: 'cjs' },
            { file: pkg.module, format: 'es' }
        ]
    }

rollup.config.js

import resolve from '@rollup/plugin-node-resolve';
import commonjs from '@rollup/plugin-commonjs';
import pkg from './package.json';
//import copy from 'rollup-plugin-copy'
//import postcss from 'rollup-plugin-postcss'

export default [
    {
        input: 'src/main.js',
        output: {
            name: 'howLongUntilLunch',
            file: pkg.browser,
            format: 'umd'
        },
        plugins: [
            resolve(), // so Rollup can find `ms`
            commonjs() // so Rollup can convert `ms` to an ES module
        ]
    },{
        input: 'src/main.js',
        output: [
            { file: pkg.main, format: 'cjs' },
            { file: pkg.module, format: 'es' }
        ]
    }
];

import resolve from '@rollup/plugin-node-resolve';
import commonjs from '@rollup/plugin-commonjs';
import pkg from './package.json';
import postcss from 'rollup-plugin-postcss'
import path from 'path'

export default [
    {
        input: 'src/main.js',
        output: {
            name: 'my-faceapi-js-lib',
            file: pkg.browser,
            format: 'umd'
        },
        plugins: [
            postcss({
                minimize: true,
                extensions: ['.css'],
                extract: path.resolve('dist/face-auth-rnd.css'),
            }),
            resolve(), // so Rollup can find `ms`
            commonjs() // so Rollup can convert `ms` to an ES module
        ]
    },
    {
        input: 'src/main.js',
        external: ['./main.css'],
        output: [
            { file: pkg.main, format: 'cjs' },
            { file: pkg.module, format: 'es' }
        ]
    }
];

我已经试过了，没有用，.umd.js文件有
define（['exports'，main.css']
部分，但它没有在
dist
文件夹中创建任何
.css
文件。我猜是因为没有html使用这个css，所以在树摇动期间它会掉下来。我已经试过了，没有用，.umd.js文件有
define(['exports'，'main.css']
部分，但它没有在
dist
文件夹中创建任何
.css
文件。我猜是因为没有html使用此css，所以它会在树抖动时掉落