我有这个javascript
import cards './cards-grid.scss'
import key_point from './key-point.scss'
import contact_form from './contact-form.scss'
在我的 webpack 中有这个条目和这个输出
entry: path.join(__dirname, '../scss/blocks/blocks.js'),
output: {
filename: 'block.bundle.js',
path: path.join(__dirname, '../../assets/blocks')
},
显然我将所有 CSS 都放在一个文件中,但我想为每次导入获取一个 css 文件,因此:
assets/blocks/cards-grid.min.css
assets/blocks/key-point.min.css
assets/blocks/contact-form.min.css
你觉得可能吗?有没有人有同样的需要? 谢谢。
最佳答案
为什么要在 js 中导入样式??使用 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
]
}]
}
或者您需要将 [name]
添加到输出文件名中。然后它不会将所有内容捆绑到一个文件中,但这不适用于样式(.scss 文件):
output: {
filename: '[name].js',
path: path.join(__dirname, '../../assets/blocks')
},
关于javascript - WEBPACK - 如何从 javascript 导入中获取单个构建文件,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/56557517/