使用带有bootstrap.min.css的optimize-css-assets-webpack-plugin

Question

我尝试为服务器端渲染创建一个单独的.css文件。 在我的React应用中，我使用

导入“ bootstrap / dist / css / bootstrap.min.css” 。一切都很好。

引入 optimize-css-assets-webpack-plugin 后，我的CSS无法使用webpack正确生成，并且

  

错误   ./node_modules/css-loader！./ node_modules / postcss-loader / lib？{}！../ node_modules / bootstrap / dist / css / bootstrap.min.css

     

模块构建失败：错误：/ Users / lingyinxie / Desktop / myProject / node_modules / bootstrap / dist / css中找不到PostCSS配置

     

在/Users/lingyinxie/Desktop/myProject/node_modules/postcss-loader/node_modules/postcss-load-config/index.js:51:26

     

@ ./node_modules/style-loader!./node_modules/css-loader!./node_modules/postcss-loader/lib?{}!../node_modules/bootstrap/dist/css/bootstrap.min.css   4：14-115

这是我的webpack设置，我该如何解决？

var webpack = require("webpack")
var ExtractTextPlugin = require("extract-text-webpack-plugin")
var OptimizeCssAssetsPlugin = require("optimize-css-assets-webpack-plugin")
var path = require("path")

process.noDeprecation = true

module.exports = {
    entry: "./src/index.js",
    output: {
        path: path.join(__dirname, "dist/assets"),
        filename: "bundle.js",
        publicPath: "assets",
        sourceMapFilename: "bundle.map"
    },
    devtool: "#source-map",
    module: {
        rules: [
            {
                test: /\.js$/,
                exclude: /(node_modules)/,
                loader: "babel-loader",
                query: {
                    presets: ["env", "stage-0", "react"]
                }
            },
            {
                test: /\.css$/,
                loader: ExtractTextPlugin.extract({
                    fallback: "style-loader",
                    use: ["style-loader", "css-loader", {
                        loader: "postcss-loader",
                        options: {
                          plugins: () => [require("autoprefixer")]
                        }}]
                })
            },
            {
                test: /\.scss/,
                loader: ExtractTextPlugin.extract({
                    fallback: "style-loader",
                    use: ["css-loader",{
                        loader: "postcss-loader",
                        options: {
                          plugins: () => [require("autoprefixer")]
                        }}, "sass-loader"]
                })
            },{
                test: /\.(png|woff|woff2|eot|ttf|svg)$/,
                loader: 'url-loader?limit=100000',
            }
        ]
    },
    plugins: [
        new ExtractTextPlugin("bundle.css"),
        new webpack.DefinePlugin({
            "process.env": {
                NODE_ENV: JSON.stringify("production")
            }
        }),
        new webpack.optimize.UglifyJsPlugin({
            sourceMap: true,
            warnings: false,
            mangle: false
        }),
        new OptimizeCssAssetsPlugin({
            assetNameRegExp: /\.optimize\.css$/g,
            cssProcessor: require('cssnano'),
            cssProcessorOptions: {discardComments: {removeAll: true}},
            canPrint: true
        })
    ]
}



  "devDependencies": {
    "babel-cli": "^6.26.0",
    "babel-core": "6.26.0",
    "babel-loader": "7.1.2",
    "babel-preset-env": "1.6.0",
    "babel-preset-react": "6.24.1",
    "babel-preset-stage-0": "6.24.1",
    "css-loader": "0.28.7",
    "extract-text-webpack-plugin": "3.0.0",
    "node-sass": "4.5.3",
    "optimize-css-assets-webpack-plugin": "3.2.0",
    "postcss-loader": "2.0.6",
    "sass-loader": "6.0.6",
    "style-loader": "^0.18.2",
    "webpack": "3.6.0",
    "webpack-dev-server": "2.7.1"
  },
  "dependencies": {
    "@material-ui/core": "^1.3.1",
    "autoprefixer": "^8.6.5",
    "body-parser": "1.18.2",
    "bootstrap": "^4.0.0-beta",
    "express": "4.15.5",
    "httpster": "1.0.3",
    "ignore-styles": "^5.0.1",
    "isomorphic-fetch": "2.2.1",
    "morgan": "^1.9.0",
    "postcss-load-config": "^2.0.0",
    "precss": "^3.1.2",
    "prop-types": "15.6.0",
    "react": "16.0.0",
    "react-dom": "16.0.0",
    "react-icons": "2.2.5",
    "react-redux": "5.0.6",
    "react-router-dom": "4.2.2",
    "reactstrap": "^6.3.0",
    "redux": "3.7.2",
    "redux-thunk": "2.2.0",
    "url-loader": "^1.0.1",
    "uuid": "3.1.0"
  }
}