在反应项目中添加带有输出css文件的scss（引导）编译

Question

我有一个 react/express 项目 我希望能够自定义 Bootstrap 4 并输出一个 CSS 文件，其中将包含自定义的 boostrap.css。

我已经 npm 安装了引导程序需要的加载器（postcss-loader、sass-loader、style-loader 等），尽管在 web 中我看到了一个使用 ExtractTextPlugin 的示例以获取输出文件

当我运行 webpack 配置时出现错误 " throw new Error("'output.filename' 是必需的，在配置文件中或作为 --output-filename");"

任何教程/帮助如何在单独的输出文件中完成编译自定义引导程序？

webpack config

const path = require('path');
const ExtractTextPlugin = require('extract-text-webpack-plugin');

module.exports = {

  //root file for the client/browser app
  entry: './src/client/client.js',

  //output file and its location
  output: {
    filename: 'bundle.js',
    path: path.resolve(__dirname,'public'),
  },

  //run babel for every filename
  module: {
    rules: [
      {
        test: /\.js?$/,
        loader: 'babel-loader',
        exclude: /node_modules/,
        options: {
          presets:
          [
            'react',
            'stage-0',
            [
              'env',
              {
                targets:
                {
                  browsers:
                  ['last 2 versions']
                }
              }
            ]
          ]
        }
      }
    ]
  },
};
module.exports = {
  //  root file for the client/browser app
  entry: './src/client/styles/main.scss',

  //  output file and its location
  output: {
    filename: 'styles2.css',
    path: path.resolve(__dirname,'public'),
  },
  module: {
    loaders: [
      // ...
      {
        test: /\.scss$/,
        loader: ExtractTextPlugin.extract('css!sass')
      }
    ]
  },
  plugins: [
    new ExtractTextPlugin('public/style.css', {
      allChunks: true,
    })
  ]
};

Answer 1

您需要删除多余的module.exports。我认为不需要其中两个，因为您可以在单个 module.exports 中简单地实现相同的目标。

你可以这样实现：

const path = require('path');
const ExtractTextPlugin = require('extract-text-webpack-plugin');

module.exports = {
  //root file for the client/browser app
  entry: [
    './src/client/client.js',
    './src/client/styles/main.scss'
  ],

  //output file and its location
  output: {
    filename: 'bundle.js',
    path: path.resolve(__dirname,'public'),
  },

  //run babel for every filename
  module: {
    rules: [
      {
        test: /\.js?$/,
        loader: 'babel-loader',
        exclude: /node_modules/,
        options: {
          presets:[
           'react',
           'stage-0',
           [
             'env',
              {
                targets:
               {
                browsers:
                ['last 2 versions']
              }
            }
          ]
        ]
      }
    },
    {
      test: /\.scss$/,
      loader: ExtractTextPlugin.extract('css-loader!sass-loader')
    }
  ],
  plugins: [
      new ExtractTextPlugin('public/style.css', {
      allChunks: true,
    })
   ]
 },};