css - 无法让 webpack 输出捆绑的 css？

Question

我是 webpack 的新手，正在学习一门类(class)。但是他们没有真正谈论的一件事是如何将不同的 sass 编译为 css。

我已经尝试过这里，但出现错误。我试图让它输出到 styles.css 以便与 wordpress 一起使用

const path = require('path'),
settings = require('./settings');

module.exports = {

  entry: {
    home: [
            settings.themeLocation + "js/scripts.js"
        ],
        style: [
            settings.themeLocation +'styles/main.sass'
        ]
    App: settings.themeLocation + "js/scripts.js"
  },
  output: {
    home: [
    path: path.resolve(__dirname, settings.themeLocation + "js"),
    filename: "scripts-bundled.js"
    ]
    style:[
    path: path.resolve(__dirname, settings.themeLocation + "styles"),
    filename: "styles-bundled.css"
    ]
  },
  module: {

    rules: [
      {
        test: /\.js$/,
        exclude: /node_modules/,
        use: {
          loader: 'babel-loader',
          options: {
            presets: ['@babel/preset-env']
          }
        }
      },
      { test: /\.css$/, use: 'css-loader' }
      { test: /\.sass$/, use: 'sass-loader' }
    ]
  },
  mode: 'development'
}

Answer 1

这是我的 webpack 配置的一个片段

你需要安装style-loader、css-loader和sass-loader
以下片段用于开发部分

{
                test: /\.css$/,
                exclude: /node_modules/,
                use: [
                    {
                        loader: 'style-loader',
                    },
                    {
                        loader: 'css-loader',
                        options: {
                            sourceMap: true,
                        },
                    },
                ],
            },
            {
                test: /\.scss$/,
                exclude: /node_modules/,
                use: [
                    {
                        loader: 'style-loader',
                    },
                    {
                        loader: 'css-loader',
                        options: {
                            sourceMap: true,
                        },
                    },
                    {
                        loader: 'sass-loader',
                        options: {
                            sourceMap: true,
                        },
                    },
                ],
            },

用于生产

{
                test: /\.css$/,
                exclude: /node_modules/,
                use: [
                    MiniCssExtractPlugin.loader,
                    {
                        loader: 'css-loader',
                        options: {
                            minimize: true,
                            importLoaders: 2,
                        },
                    },
                ],
            },
            {
                test: /\.scss$/,
                exclude: /node_modules/,
                use: [
                    MiniCssExtractPlugin.loader,
                    {
                        loader: 'css-loader',
                        options: {
                            minimize: true,
                            importLoaders: 3,
                        },
                    },
                    'sass-loader',
                ],
            },

将以下内容添加到插件部分

new MiniCssExtractPlugin({
    filename: '[name].[chunkhash:8].css',
}),

请注意，上面的代码片段可能无法直接为您工作，它只是让您了解 webpack 如何处理 css $ scss