Webpack 2/React：无法使样式起作用

Question

我已经被困在这里几个小时了 - 无法将我的样式包含在 webpack.config.js 的开发模式中，并且无法在我使用时捆绑我的样式使用 webpack.config.prod.js 构建我的项目 - 或者将样式 link 注入生成的索引 - 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;

我非常感谢任何输入 <3

Answer 1

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

Webpack 2/React：无法使样式起作用

Webpack 2/React: cannot get style to work

sass

reactjs

wordpress-rest-api

webpack-2