Javascript webpack4 css绑定不适用于自定义样式名称

我正在使用Webpack4制作我自己的React样板文件，并且已经解决了我的css文件被捆绑而不是呈现特定自定义样式的问题。您可以看到，我正在使用

sass加载程序

将我所有的

.sass/scss

文件编译在一起，并使用

postsss加载程序

自动刷新，

css加载程序

加载编译后的css文件，

MiniCssExtractPlugin.loader

将css提取到单独的文件中，最后使用

样式加载程序

插入我的css。它正确地完成了所有这些，但实际上并没有应用这些样式。有人能解释为什么会发生这种情况吗

回购协议可以找到

webpack.config.js

/*  Required Packages                                             */
const webpack               = require('webpack')
const path                  = require('path');
const HtmlWebpackPlugin     = require('html-webpack-plugin');
const WebpackMd5Hash        = require('webpack-md5-hash');
const MiniCssExtractPlugin  = require("mini-css-extract-plugin");
const CleanWebpackPlugin    = require('clean-webpack-plugin')

module.exports = {
  //entry to bundled js file
  entry: [
    'react-hot-loader/patch',
    './src/index.js'
  ],
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: '[name].[hash].js'   //output filename
  },
  //want to use the src/index.js file as entry point to bundle all of its imported files
  module:{
    rules:[
      {
        test: /\.(js|jsx)$/,
        exclude: /node_modules/,
        use: ['babel-loader']
      },
      {
        test: /\.scss$/,
        use:  [  'style-loader', MiniCssExtractPlugin.loader, 'css-loader', 'postcss-loader','sass-loader'],
        exclude: ["node_modules"]
      }
    ]
  },
  //webpack server hot module replacement
  plugins: [
    new CleanWebpackPlugin('dist', {}),
    new MiniCssExtractPlugin({
      filename: 'style.[hash].css',
    }),
    new HtmlWebpackPlugin({
      inject: false,
      hash: true,
      template: './src/index.html',
      filename: 'index.html'
    }),
    new WebpackMd5Hash(),
    new webpack.HotModuleReplacementPlugin()
  ],
  resolve: {
    extensions: ['*', '.js', '.jsx']  //array of extensions to compile js
  },
  devServer: {
     contentBase: './dist',
     hot: true
  }
}

package.json

"scripts": {
    "build": "webpack --mode production",
    "dev": "webpack-dev-server --mode development --config ./webpack.config.js --open --hot --history-api-fallback"
  },
  "repository": {
    "type": "git",
    "url": "git+https://github.com/Nickadiemus/ns-react-boilerplate.git"
  },
  "author": "Nick Sladic",
  "license": "MIT",
  "bugs": {
    "url": "https://github.com/Nickadiemus/ns-react-boilerplate/issues"
  },
  "homepage": "https://github.com/Nickadiemus/ns-react-boilerplate#readme",
  "devDependencies": {
    "autoprefixer": "^8.6.5",
    "babel-core": "^6.26.3",
    "babel-loader": "^7.1.5",
    "babel-preset-env": "^1.7.0",
    "babel-preset-react": "^6.24.1",
    "babel-preset-stage-2": "^6.24.1",
    "clean-webpack-plugin": "^0.1.19",
    "css-loader": "^1.0.0",
    "extract-text-webpack-plugin": "^4.0.0-beta.0",
    "html-webpack-plugin": "^3.2.0",
    "mini-css-extract-plugin": "^0.4.1",
    "node-sass": "^4.9.2",
    "postcss-loader": "^2.1.6",
    "react-hot-loader": "^4.3.3",
    "sass-loader": "^7.0.3",
    "style-loader": "^0.21.0",
    "webpack": "^4.15.1",
    "webpack-cli": "^3.0.8",
    "webpack-dev-server": "^3.1.4",
    "webpack-md5-hash": "0.0.6"
  },
  "dependencies": {
    "react": "^16.4.1",
    "react-dom": "^16.4.1",
    "react-router-dom": "^4.3.1"
  }
}

---

使用

'style-loader'

或

MiniCssExtractPlugin.loader

，而不是两者都使用：

const devMode = process.env.NODE_ENV !== 'production';
...
{
  test: /\.scss$/,
  use: [  
    devMode ? 'style-loader' : MiniCssExtractPlugin.loader, 
    'css-loader', 
    'postcss-loader',
    'sass-loader'
  ],
  exclude: ["node_modules"]
}

---

来源：

将尝试此方法。我马上给你反馈