我正在尝试让我的 webpack 构建导出 2 个 css 文件,一个用于所有 lib 文件,一个用于我的文件。我需要将这两个文件分别放入我的 main.js 中。 Atm 它将所有 css 需求合并到 1 个文件中。
我能够生成文件的唯一方法是拆分条目:
entry: {
lib:'./style/lib.scss',
app: [
'./src/index.js',
'./style/style.scss',
],
},
但是生成的lib.scss是样式的重复,并且此方法还创建了冗余的lib.js。有没有办法创建2个单独的css文件,或者设置需要单独导出而不是合并到单个文件中的任何所需的css?
最佳答案
您可以通过使用不同的插件实例将 CSS 库与样式分开:
const ExtractTextPlugin = require('extract-text-webpack-plugin');
// Create multiple instances
const extractStyle = new ExtractTextPlugin('style.css');
const extractLib = new ExtractTextPlugin('lib.css');
还有 scss 的不同文件夹:
{
test: /\.scss$/i,
include: resolve(__dirname, './../app/stylesheets'),
loader: extractLib.extract({
fallback: 'style-loader',
use: [
{
loader: 'css-loader',
},
{
loader: 'sass-loader'
}
]
})
},
{
test: /\.scss$/i,
include: resolve(__dirname, './../app/src'),
use: extractStyle.extract({
fallback: 'style-loader',
use: [
{
loader: 'css-loader',
},
{
loader: 'sass-loader'
}
]
})
}
您可以在此处查看完整示例:https://github.com/jquintozamora/webpack-multiple-css-output/blob/master/webpack/webpack.config.js
关于javascript - webpack extract-text-plugin 输出多个 css 文件,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/43722264/