Question

我是webpack的新手，正在学习课程。但是他们没有真正谈论的一件事是如何将不同的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

无法使webpack输出捆绑的CSS？

1 个答案: