Можете ли вы импортировать несколько файлов CSS в конфигурации Webpack без использования импорта в сценарии ввода JavaScript? - PullRequest
Новая
       10

Можете ли вы импортировать несколько файлов CSS в конфигурации Webpack без использования импорта в сценарии ввода JavaScript?

1 голос
/ 02 мая 2019

Есть ли способ импортировать CSS через веб-пакет без использования импорта в js?

Например, если я разделил весь свой CSS на чистые файлы для каждого компонента, я не хочу импортировать их все один за другим в JS, я просто хочу построить, и он автоматически включит все в папку.

Мой конфиг веб-пакета выглядит следующим образом: 

 const path = require('path');
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
const devMode = process.env.NODE_ENV !== 'production';

console.log('path : ', path.resolve(__dirname, 'src', 'scss'));

module.exports = {
    output : {
        filename : 'bundle.js',
        path : path.resolve(__dirname, 'web/static')
    },
    module: {
        rules: [
            {
                test: /\.s?[ac]ss$/,
                exclude: /node_modules/,
                use: [
                    MiniCssExtractPlugin.loader,
                    { loader: 'css-loader', options: { url: false, sourceMap: true } },
                    { loader: 'sass-loader', },
                    { loader: 'postcss-loader' }
                ],
            },
            {
                test: /\.m?js$/,
                exclude: /(node_modules|bower_components)/,
                use: {
                    loader: 'babel-loader',
                    options: {
                        presets: ['@babel/preset-env']
                    }
                }
            }
        ]
    },
    plugins: [
        new MiniCssExtractPlugin({
            filename: "style.css"
        })

    ],
    mode : devMode ? 'development' : 'production',
    devServer: {
        allowedHosts: [
            'joblot-trophies.local',
        ],
        publicPath: '/assets/',
        overlay: true,
        inline: true,
    },
}

1 Ответ

0 голосов
/ 08 мая 2019

Вы можете сделать это

Пример: 

    const extractCSS = new ExtractTextPlugin("style.css");
    module.exports = {
      module: {
        rules: [
          {
            test: /\.css(\?|$)/,
            use: extractCSS.extract({
              use: isDevBuild ? "css-loader" : "css-loader?minimize"
            })
          }
        ]
      },
      plugins: [extractCSS]
    };
...