-
使用 webpack 插件 mini-css-extract-plugin 需要额外安装
npm i mini-css-extract-plugin@latest -D
; -
同时打包 js 和 css 文件时,可参考 entry 高级用法;文章来源:https://www.toymoban.com/news/detail-680084.html
-
package.json
的配置如下文章来源地址https://www.toymoban.com/news/detail-680084.htmlconst { VueLoaderPlugin } = require('vue-loader'); // 可将CSS提取到单独的文件 const MiniCssExtractPlugin = require('mini-css-extract-plugin') module.exports = { mode: 'production', entry: { "my-webcomponents": ['./index.js', './src/assets/stylus/main.styl'], "my-webcomponents2": ['./index2.js', './src/assets/stylus/main2.styl'], }, output: { path: path.resolve(__dirname, 'dist'), filename: '[name].js', clean: true, }, plugins: [ new VueLoaderPlugin(), new MiniCssExtractPlugin({ filename: "[name].css", // filename: "main.css", // 也可以指定名称,但css只会输出一个 }), ], }
到了这里,关于《基于 Vue 组件库 的 Webpack5 配置》3.将 CSS 提取到单独的文件的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!