Question

我有一个反应/快递项目我希望能够自定义Bootstrap 4并输出一个包含自定义boostrap.css的CSS文件。

我有npm安装了loaders bootstrap需求（postcss-loader，sass-loader，style-loader等），虽然在web中我看到了一个ExtractTextPlugin示例以获取输出文件

当我运行webpack配置时出现错误＆＃34;抛出新的错误（＆＃34;＆＃39; output.filename＆＃39;是必需的，无论是在配置文件中还是作为--output-filename＆＃34;）;＆＃34;

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

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,
    })
   ]
 },};

在反应项目中使用输出css文件添加scss（bootstrap）编译

1 个答案: