Webpack 2 / React：无法让风格上班

Question

我已经被困在这里几个小时了 - 不能用 webpack.config.js 将我的风格包含在开发模式中，并且不能捆绑我的风格时我使用 webpack.config.prod.js 构建我的项目 - 或者将样式链接注入生成的index-template.html。相反，不会生成任何css文件 - 并且生成的html文件不包含样式标记：

我已经在其他React / Webpack项目中完成了这项工作而没有任何问题，其中相同的配置会导致样式标记和捆绑的css文件：

我不明白我哪里出错了..这是我的文件夹结构：

这是我的webpack.config.js文件：

const webpack = require('webpack');
const path = require('path');

const entry = [
  'babel-polyfill',
  'webpack-dev-server/client?http://127.0.0.1:8080', // Specify the local server port
  'webpack/hot/only-dev-server', // Enable hot reloading
  './scripts/index.js' // Where webpack will be looking for entry index.js file
];

const output = {
  path: path.join(__dirname, 'dist'), // This is used to specify folder for producion bundle
  publicPath: '/dist',
  filename: 'bundle.min.js' // Filename for production bundle
}

const plugins = [
  new webpack.HotModuleReplacementPlugin(), // Hot reloading
    new webpack.NoEmitOnErrorsPlugin(), // Webpack will let you know if there are any errors

    // Declare global variables
    new webpack.ProvidePlugin({
        React: 'react',
        ReactDOM: 'react-dom',
        _: 'lodash'
    })
]

const config = {
  context: path.join(__dirname, 'src'),
  entry: entry,
  devtool: 'inline-source-map',
    devServer: {
        historyApiFallback: true, // This will make the server understand "/some-link" routs instead of "/#/some-link"
    },
  output: output,
  module: {
    rules: [
      {
                test: /\.(js|jsx)$/,
        exclude: /node_modules/,
                include: path.join(__dirname, 'src'),
        use: {
                    loader: "babel-loader"
                }
            },
      {
                test: /\.(sass|scss)$/,
                use: [
                    'style-loader',
                    'css-loader',
                    'sass-loader'
                ]
            }
    ]
  },
  plugins: plugins
}

module.exports = config;

这是我的webpack.config.prod.js文件：

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

const entry = [
  './scripts' // Where webpack will be looking for entry index.js file
];

const output = {
  path: path.join(__dirname, 'dist'), // This is used to specify folder for producion bundle
  publicPath: '/dist',
  filename: 'bundle.min.js' // Filename for production bundle
}

const plugins = [
  new webpack.HotModuleReplacementPlugin(), // Hot reloading
    new webpack.NoEmitOnErrorsPlugin(), // Webpack will let you know if there are any errors

    // Declare global variables
    new webpack.ProvidePlugin({
        React: 'react',
        ReactDOM: 'react-dom',
        _: 'lodash'
    }),

  new ExtractTextPlugin({
    disable: false,
    filename: 'bundle.css',
    allChunks: true
  }), // extract you css into seperate file files to serve your webpack bundles

  new HtmlWebpackPlugin({
    filename: 'index.html',
    template: './index.html',
    hash: false,
    inject: true,
    minify: {
      removeComments: true,
      collapseWhitespace: true,
      removeRedundantAttributes: true,
      useShortDoctype: true,
      removeEmptyAttributes: true,
      removeStyleLinkTypeAttributes: true,
      keepClosingSlash: true,
      minifyJS: true,
      minifyCSS: true,
      minifyURLs: true,
    }
  }),

  new webpack.optimize.UglifyJsPlugin({
    compress: {
      warnings: false
    },
    sourceMap: true
  }),

  new webpack.optimize.CommonsChunkPlugin({
        name: 'bundle',
        filename: 'bundle.common.js'
    })
]

const config = {
  context: path.join(__dirname, 'src'),
  entry: entry,
  devtool: 'source-map',
    devServer: {
        historyApiFallback: true, // This will make the server understand "/some-link" routs instead of "/#/some-link"
    },
  output: output,
  module: {
    rules: [
      {
                test: /\.(js|jsx)$/,
                exclude: /node_modules/,
                include: path.join(__dirname, 'src'),
                use: {
                    loader: "babel-loader"
                }
            },
      {
                test: /\.(sass|scss)$/,
                use: ExtractTextPlugin.extract({
                fallback: 'style-loader',
                use: [
                  'css-loader',
                  {
                            loader: 'postcss-loader',
                            options: {
                                plugins: (loader) => [ require('autoprefixer')() ]
                            }
                        },
                  'sass-loader',
                ]
              })
            }
    ]
  },
  plugins: plugins
}

module.exports = config;

我非常感谢任何输入＆lt; 3

Answer 1

正如@margaretkru所说，我忘了在我的index.js文件中导入我的app.scss！