Question

有没有一种方法可以通过webpack导入CSS，而无需在js中使用import？

例如，如果我将所有CSS拆分为每个组件的干净文件，而又不想将其全部逐个导入JS中，我只想构建并将其自动包含在文件夹中。

我的webpack配置如下：

 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,
    },
}

Answer 1

您可以这样做

示例：

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

您可以在Webpack配置中导入多个CSS文件，而无需在JavaScript输入脚本上使用import吗？

1 个答案: