WEBPACK - Как получить отдельный файл сборки из импорта javascript

Question

У меня есть этот javascript

import cards './cards-grid.scss' 
import key_point from './key-point.scss'
import contact_form from './contact-form.scss'

, в моем веб-пакете есть эта запись и этот вывод

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

Как вы думаете, это возможно?У кого-нибудь была такая же потребность?Благодаря.

Answer 1

Почему вы импортируете свои стили в 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')
},