Как вывести несколько файлов CSS из одного файла JS в Webpack 4?

Question

В моем js-файле "example.js" я хочу импортировать два файла.scss "example.scss" и "example.m.scss" для настольной и мобильной версии веб-сайта соответственно. Поэтому мне нужно три вывода - example.js, example.scss и example.m.scss. Как я могу добиться этого в Webpack 4?

JS файл:

// CSS
import '../../css/example.scss';
import '../../css/mobile/example.m.scss';

Моя текущая конфигурация Webpack:

const path = require('path');
const webpack = require("webpack");
const MiniCssExtractPlugin = require("mini-css-extract-plugin");

module.exports = {
    entry: {
        home: './src/AppBundle/Resources/public/js/main_home/main_home.js',
       // ...
    },

    output: {
        filename: '[name].js',
        path: path.resolve(__dirname, 'web/assets'),
    },

    module: {
        rules: [
            {
                test: /\.scss|.css$/,
                use: [
                    MiniCssExtractPlugin.loader,
                    "css-loader", // translates CSS into CommonJS
                    "sass-loader" // compiles Sass to CSS, using Node Sass by default
                ]
            },
            {
                test: /\.(png|jpg|jpeg|gif)$/,
                use: ['file-loader'],
            },
            {
                test: /\.(woff(2)?|ttf|eot|svg)(\?v=\d+\.\d+\.\d+)?$/,
                use: [{
                    loader: 'file-loader'
                }]
            }
        ]
    },

    plugins: [
        new MiniCssExtractPlugin({
            filename: "[name].css",
        }),

        new webpack.ProvidePlugin({
            $: "jquery",
            jQuery: "jquery",
            'window.$': 'jquery',
            'window.jQuery': 'jquery'
        })
    ]
};

Answer 1

Я не уверен, работает ли он и для файлов .scss, но, согласно этому ресурсу , вы можете сделать следующее с файлами .css (однако они утверждают, что веб-пакет не лучший инструмент для этого):

Лучший способ объединить файлы CSS в один независимый файл CSS — использовать extract-text-webpack-plugin.

      npm install --save-dev extract-text-webpack-plugin

Отредактируйте webpack.config.js , чтобы включить установку плагина.

      const path = require('path');
const ExtractTextPlugin = require('extract-text-webpack-plugin');

module.exports = {
  entry: {
    'bundle.min.css': [
      path.resolve(__dirname, 'src/css/main.css'),
      path.resolve(__dirname, 'src/css/local.css')
    ],
    'bundle.js': [
      path.resolve(__dirname, 'src/index.js')
    ]
  },
  output: {
    filename: '[name]',
    path: path.resolve(__dirname, 'dist'),
  },
  module: {
    rules: [
      {
        test: /\.css$/,
        use: ExtractTextPlugin.extract({
          fallback: 'style-loader',
          use: 'css-loader'
        })
      },
    ],
  },
  plugins: [
    new ExtractTextPlugin("bundle.min.css"),
  ]
};

Сгенерированный файл dist/bundle.min.css представляет собой чистый файл css, объединяющий src/css/main.css и src/css/local.css .

      # npm run build
./node_modules/.bin/webpack
# build for production (with minified)
./node_modules/.bin/webpack -p

ПРИМЕЧАНИЕ . Если вы перейдете по ссылке выше, вы также сможете найти шаги дляфайлов Lass и Less .

Answer 2

Предполагая, что вы не хотите добавлять вторую точку входа js для вашего второго css-пакета, посмотрите пример здесь: https://github.com/webpack-contrib/mini-css-extract-plugin/issues/45

Немного сложно понять это правильно.