Question

我正在使用Webpack4制作自己的React样板，并遇到了我的css文件被捆绑而不呈现特定自定义样式的问题。如您所见，我正在使用sass-loader将我所有的.sass/scss文件一起编译，并且postcss-loader用于自动前缀，css-loader用来加载已编译的CSS文件，MiniCssExtractPlugin.loader提取将CSS放入单独的文件中，最后style-loader注入我的CSS。它正确地完成了所有购买工作，似乎并没有真正应用这些样式。谁能解释为什么会这样？

可以找到回购 here

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"
  }
}

Answer 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"]
}

来源：mini-css-extract-plugin docs

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

1 个答案: