[英]WEBPACK - How to get individual build file from a javascript import
I have this javascript 我有这个JavaScript
import cards './cards-grid.scss'
import key_point from './key-point.scss'
import contact_form from './contact-form.scss'
in my webpack there is this entry and this output 在我的webpack中有此条目和此输出
entry: path.join(__dirname, '../scss/blocks/blocks.js'),
output: {
filename: 'block.bundle.js',
path: path.join(__dirname, '../../assets/blocks')
},
Obviously I have all the CSS in one file, but I would like to get a css file for each import, so: 显然我将所有CSS放在一个文件中,但是我想为每个导入获取一个CSS文件,因此:
assets/blocks/cards-grid.min.css
assets/blocks/key-point.min.css
assets/blocks/contact-form.min.css
Do you think it's possible? 你认为有可能吗? has anyone had the same need?
有谁有同样的需求? Thanks.
谢谢。
Why are you importing your styles in js?? 为什么要在js中导入样式? Use
css-loader
and sass-loader
: 使用
css-loader
和sass-loader
:
module: {
rules: [{
test: /\.scss$/,
use: [
"style-loader", // creates style nodes from JS strings
"css-loader", // translates CSS into CommonJS
"sass-loader" // compiles Sass to CSS, using Node Sass by default
]
}]
}
OR you need to add [name]
into output file name. 或者,您需要在输出文件名中添加
[name]
。 It will then not bundle all into one file, but this will not work for styles (.scss files): 然后,它不会将全部捆绑到一个文件中,但这不适用于样式(.scss文件):
output: {
filename: '[name].js',
path: path.join(__dirname, '../../assets/blocks')
},
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.