在 webpack 中添加自动前缀

Question

我的 webpack.config.js 文件：

var path = require("path"),
    src = path.resolve(__dirname, "src"),
    dist = path.resolve(__dirname, "dist"),
    webpack = require("webpack");

var HtmlWebpackPlugin = require("html-webpack-plugin");
var ExtractPlugin = require("extract-text-webpack-plugin"),
    CleanWebpackPlugin = require("clean-webpack-plugin"),
    CopyWebpackPlugin = require("copy-webpack-plugin");

var extractCssPlugin = new ExtractPlugin({
  filename: "css/main.min.css"
});

var extractHtmlPlugin = new ExtractPlugin({
  filename: "[name].html"
});

module.exports = {
  entry: {
    bundle: src + "/app/app.js"
  },
  output: {
    path: dist,
    filename: 'js/[name].min.js'
  },
  devtool: 'source-map',
  module: {
    rules: [
      {
                test: /\.js?/,
                include: src,
                loader: "babel-loader",
                query:{
                    presets: ["react", "es2015", "stage-2"]
                }
            },
      {
          test: /\.pug$/,
          loaders: ['file-loader?name=[name].html', 'pug-html-loader?pretty&exports=false']
      },
      {
        test: /\.scss$/,
        use: extractCssPlugin.extract({
          use:[
            {
              loader: "css-loader",
              options: {sourceMap: true, minimize: true}
            },
            {
              loader: "sass-loader",
              options: {sourceMap: true}
            },
            "postcss-loader"
          ]
        })
      }
    ]
  },

  plugins: [
    cleanPlugin,
    copyPlugin,
    extractCssPlugin,
    extractHtmlPlugin,
    new webpack.DefinePlugin({
      'process.env': {
        'NODE_ENV': JSON.stringify('production')
      }
    })
  ]
}

我在 src/css/postcss.config.js 里面的 postcss.config.js

module.exports = {
  plugins: [require("autoprefixer")]
};

package.json

{
  "name": "test_project",
  "version": "1.0.0",
  "description": "",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "build:prod": "webpack -p",
    "build:dev": "webpack -d"
  },
  "browserslist": ["last 2 versions"],
  "keywords": [],
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "autoprefixer": "^8.0.0",
    "babel-core": "^6.26.0",
    "babel-loader": "^7.1.2",
    "babel-preset-es2015": "^6.24.1",
    "babel-preset-react": "^6.24.1",
    "babel-preset-stage-2": "^6.24.1",
    "clean-webpack-plugin": "^0.1.17",
    "copy-webpack-plugin": "^4.3.1",
    "css-loader": "^0.28.9",
    "cssnano": "^3.10.0",
    "extract-loader": "^2.0.1",
    "extract-text-webpack-plugin": "^3.0.2",
    "file-loader": "^1.1.6",
    "html-webpack-plugin": "^2.30.1",
    "node-sass": "^4.7.2",
    "postcss-cssnext": "^3.1.0",
    "postcss-loader": "^2.1.0",
    "pug-html-loader": "^1.1.5",
    "react": "^16.2.0",
    "react-dom": "^16.2.0",
    "react-router": "^4.2.0",
    "react-router-dom": "^4.2.2",
    "sass-loader": "^6.0.6",
    "style-loader": "^0.19.1",
    "webpack": "^3.10.0",
    "webpack-dev-server": "^2.11.0"
  },
  "dependencies": {
    "postcss-import": "^11.1.0",
    "precss": "^3.1.2"
  }
}

只要将 main.scss 编译为 webpack 中的 main.css，只需将 autoprefixer 添加到我的 css 代码中即可。我确实尝试过使用 post-css 加载器，但我做错了。

Answer 1

加载器的顺序对于 webpack 很重要。
目前，您首先使用 postcss-loader 为从 javascript 加载的所有根文件中的所有内容添加前缀。
然后使用 sass-loader 从 scss 文件中解析导入。
这意味着所有二级导入都不会加前缀。

这是一个简单的解决方法。只需将 sass-loader 放在首位，您还需要将 sourceMap 添加到 postcss-loader。

use:[
  {
    loader: "css-loader",
    options: {sourceMap: true, minimize: true}
  },
  {
    loader: "postcss-loader",
    options: {sourceMap: true}
  },
  {
    loader: "sass-loader",
    options: {sourceMap: true}
  },
]