嘿,我需要以下方面的帮助:
编辑
显然,此方法需要在父应用程序项目中手动加载CSS。我想避免。是否有其他方法可以提供无需手动加载即可在组件级别上解决样式的方案?
这是我的生产webpack配置:
const path = require('path');
const ExtractTextPlugin = require('extract-text-webpack-plugin');
const UglifyJsPlugin = require('uglifyjs-webpack-plugin');
module.exports = {
entry: './src/index.js',
output: {
filename: 'bundle.js',
path: path.join(__dirname, '../lib'),
libraryTarget: 'commonjs',
},
module: {
rules: [
{
test: /\.css$/,
use: ExtractTextPlugin.extract({
fallback: 'style-loader',
use: ['css-loader']
})
},
{
test: /\.scss$/,
use: ExtractTextPlugin.extract({
fallback: 'style-loader',
use: ['css-loader', 'sass-loader']
})
},
{
test: /\.js$/,
exclude: /node_modules/,
loader: "babel-loader"
},
{
test: /\.svg/,
use: {
loader: 'svg-url-loader',
options: {}
}
}
]
},
externals: {
'react': 'commonjs react',
'react-dom': 'commonjs react-dom',
},
resolve: {
modules: [
path.resolve('./src'),
path.resolve('./node_modules')
]
},
plugins: [
new ExtractTextPlugin({
filename: 'ui-library.css'
})
]
};
最佳答案
您根本无法使用ExtractTextPlugin
。
Webpack的整个目的不是基于文件类型而是通过组件 Angular 对 Assets 进行分组。
因此,如果删除ExtractTextPlugin
,则CSS将包含在.js bundle 包中。