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

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

0 голосов
/ 24 декабря 2018

В моем 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'
        })
    ]
};

1 Ответ

0 голосов
/ 24 декабря 2018

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

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

...