#webpack #sass
Вопрос:
Я пытаюсь создать очень простой конфигурационный файл webpack, который будет принимать все файлы scss в проекте (включая вложенные папки), а также переносить и выводить в один файл CSS в папке dist. Я использую плагин minicssextract для этого
Звучит достаточно просто, но мне не везет с настройкой, ниже приведено содержание моего webpack.config.js файл:
const path = require('path'); const { resolve } = require('path'); const MiniCssExtractPlugin = require('mini-css-extract-plugin'); module.exports = { entry: './src/index.js', output: { filename: 'main.js', path: path.resolve(__dirname, 'dist'), }, module: { rules: [ { test: /.css$/, include: resolve(__dirname, 'node_modules', 'react-toolbox'), use: [ MiniCssExtractPlugin.loader, // 'style-loader', { loader: 'css-loader', options: { modules: true, sourceMap: true, importLoaders: 1, localIdentName: '[name]_[local]_[hash:base64:5]' } }, // 'postcss-loader' ] }, { test: /.scss$/, use: ['style-loader', MiniCssExtractPlugin.loader, 'css-loader', 'sass-loader'] }, { test: /.css$/, exclude: resolve(__dirname, 'node_modules', 'react-toolbox'), use: ['style-loader', 'css-loader'] }, ] }, plugins: [ new MiniCssExtractPlugin({ filename: 'style.css', }), ], };
Есть идеи, где я ошибаюсь?