Question

我是webpack的新手，我试图将所有内容设置为反应项目。我设法让所有的东西都按照预期在webpack中运行，但是已经遇到了使用autoprefixer的路障。

我已经关注了post css和autoprefixer的文档，我明显错过了一些重要的东西或者做了一些愚蠢的事情。请你看一下我的配置，如果你有任何建议，请告诉我。

其他postcss插件工作正常，如nanocss。虽然我已经尝试了cssnext，因为我认为包括autoprefixer无论如何。

我认为它是autoprefixer配置问题。

如果您键入npx autoprefixer info，则在命令行中还有另一件事。一切都很好。我构建或运行开发服务器时没有错误，它不会自动修复任何内容。

这是我的所有配置文件。提前谢谢。

.browserlistrc

# Browsers that we support

> 1%
Last 2 versions
IE 8 # sorry

webpack.config.js

const path = require('path');

const HtmlWebpackPlugin = require('html-webpack-plugin');
const ExtractTextPlugin = require('extract-text-webpack-plugin');

// Constant with our paths
const paths = {
  DIST: path.resolve(__dirname, 'dist'),
  SRC: path.resolve(__dirname, 'src'),
  JS: path.resolve(__dirname, 'src/js'),
};

// Webpack configuration
module.exports = {
  entry: path.join(paths.JS, 'app.jsx'),
  output: {
    path: paths.DIST,
    filename: 'app.bundle.js',
  },
  // Tell webpack to use html plugin and extract css to separate bundle
  plugins: [
    new HtmlWebpackPlugin({
      template: path.join(paths.SRC, 'index.html'),
    }),
    new ExtractTextPlugin('style.bundle.css'),
  ],
  // Loaders configuration
  module: {
    rules: [
      {
        test: /\.(js|jsx)$/,
        exclude: /node_modules/,
        use: [
          'babel-loader',
        ],
      },
      {
        test: /\.less$/,
        use: ExtractTextPlugin.extract({
          use: ['css-loader', 'postcss-loader', 'less-loader'],
        }),
      },
      {
        test: /\.(png|jpg|gif)$/,
        use: [
          'file-loader',
        ],
      },
    ],
  },
  resolve: {
    extensions: ['.js', '.jsx'],
  },
};

postcss.config.js

module.exports = {
  plugins: [
    require('autoprefixer'),
    // require('cssnano')
  ]
}

我现在也尝试过劳伦特的建议。我不确定这是否有进展，但我现在收到一些错误记录。我的配置现在看起来像没有postcss.config

  const path = require("path");

    const HtmlWebpackPlugin = require("html-webpack-plugin");
    const ExtractTextPlugin = require("extract-text-webpack-plugin");
    const webpack = require("webpack");
    const autoprefixer = require("autoprefixer");

    // Constant with our paths
    const paths = {
      DIST: path.resolve(__dirname, "dist"),
      SRC: path.resolve(__dirname, "src"),
      JS: path.resolve(__dirname, "src/js")
    };

    // Webpack configuration
    module.exports = {
      entry: path.join(paths.JS, "app.jsx"),
      output: {
        path: paths.DIST,
        filename: "app.bundle.js"
      },
      // Tell webpack to use html plugin and extract css to separate bundle
      plugins: [
        new HtmlWebpackPlugin({
          template: path.join(paths.SRC, "index.html")
        }),
        new ExtractTextPlugin("style.bundle.css"),
        new webpack.ProvidePlugin({
          $: "jquery",
          jQuery: "jquery"
        })
      ],
      // Loaders configuration
      module: {
        rules: [
          {
            test: /\.(js|jsx)$/,
            exclude: /node_modules/,
            use: ["babel-loader"]
          },
          {
            test: /\.less$/,
            use: ExtractTextPlugin.extract({
              use: [
                "css-loader",
                {
                  loader: "postcss-loader",
                  options: {
                    plugins: () =>
                      autoprefixer({
                        browsers: ["last 3 versions", "> 1%"]
                      })
                  }
                },
                "less-loader"
              ]
            })
          },
          {
            test: /\.(png|jpg|gif)$/,
            use: ["file-loader"]
          }
        ]
      },
      resolve: {
        extensions: [".js", ".jsx"]
      },
      devtool: "source-map"
    };

log is this

Project is running at http://localhost:8131/
webpack output is served from /
Hash: 546e87b727efc5c86ece
Version: webpack 3.10.0
Time: 2158ms
            Asset       Size  Chunks                    Chunk Names
    app.bundle.js    1.32 MB       0  [emitted]  [big]  main
app.bundle.js.map    1.59 MB       0  [emitted]         main
       index.html  297 bytes          [emitted]
   [4] ./node_modules/react/index.js 190 bytes {0} [built]
  [16] multi (webpack)-dev-server/client?http://localhost:8131 ./src/js/app.jsx 40 bytes {0} [built]
  [17] (webpack)-dev-server/client?http://localhost:8131 7.95 kB {0} [built]
  [18] ./node_modules/url/url.js 23.3 kB {0} [built]
  [25] ./node_modules/strip-ansi/index.js 161 bytes {0} [built]
  [27] ./node_modules/loglevel/lib/loglevel.js 7.86 kB {0} [built]
  [28] (webpack)-dev-server/client/socket.js 1.05 kB {0} [built]
  [30] (webpack)-dev-server/client/overlay.js 3.73 kB {0} [built]
  [35] (webpack)/hot nonrecursive ^\.\/log$ 170 bytes {0} [built]
  [36] (webpack)/hot/log.js 1.04 kB {0} [optional] [built]
  [37] (webpack)/hot/emitter.js 77 bytes {0} [built]
  [39] ./src/js/app.jsx 2.5 kB {0} [built]
  [43] ./node_modules/react-dom/index.js 1.36 kB {0} [built]
  [52] ./src/css/style.less 1.5 kB {0} [built] [failed] [1 error]
  [53] ./src/js/interface.js 384 bytes {0} [built]
    + 41 hidden modules

ERROR in ./src/css/style.less
Module build failed: ModuleBuildError: Module build failed: TypeError: css.walkAtRules is not a function
    at Processor.remove (C:\Users\Dan\Desktop\projects\WeatherReactProject\node_modules\autoprefixer\lib\processor.js:175:13)
    at Object.plugin (C:\Users\Dan\Desktop\projects\WeatherReactProject\node_modules\autoprefixer\lib\autoprefixer.js:87:32)
    at Object.parseOptions (C:\Users\Dan\Desktop\projects\WeatherReactProject\node_modules\postcss-loader\lib\options.js:5:37)
    at Promise.resolve.then (C:\Users\Dan\Desktop\projects\WeatherReactProject\node_modules\postcss-loader\lib\index.js:68:27)
    at <anonymous>
    at process._tickCallback (internal/process/next_tick.js:188:7)
    at runLoaders (C:\Users\Dan\Desktop\projects\WeatherReactProject\node_modules\webpack\lib\NormalModule.js:195:19)
    at C:\Users\Dan\Desktop\projects\WeatherReactProject\node_modules\loader-runner\lib\LoaderRunner.js:364:11
    at C:\Users\Dan\Desktop\projects\WeatherReactProject\node_modules\loader-runner\lib\LoaderRunner.js:230:18
    at context.callback (C:\Users\Dan\Desktop\projects\WeatherReactProject\node_modules\loader-runner\lib\LoaderRunner.js:111:13)
    at Promise.resolve.then.then.catch (C:\Users\Dan\Desktop\projects\WeatherReactProject\node_modules\postcss-loader\lib\index.js:189:71)
    at <anonymous>
    at process._tickCallback (internal/process/next_tick.js:188:7)
 @ ./src/css/style.less
 @ ./src/js/app.jsx
 @ multi (webpack)-dev-server/client?http://localhost:8131 ./src/js/app.jsx
Child html-webpack-plugin for "index.html":
     1 asset
       [0] ./node_modules/html-webpack-plugin/lib/loader.js!./src/index.html 615 bytes {0} [built]
       [1] ./node_modules/lodash/lodash.js 540 kB {0} [built]
       [2] (webpack)/buildin/global.js 509 bytes {0} [built]
       [3] (webpack)/buildin/module.js 517 bytes {0} [built]
Child extract-text-webpack-plugin node_modules/extract-text-webpack-plugin/dist node_modules/css-loader/index.js!node_modules/postcss-loader/lib/index.js??ref--1-2!node_modules/less-loader/dist/cjs.js!src/css/style.less:
       [0] ./node_modules/css-loader!./node_modules/postcss-loader/lib?{}!./node_modules/less-loader/dist/cjs.js!./src/css/style.less 718 bytes {0} [built] [failed] [1 error]

    ERROR in ./node_modules/css-loader!./node_modules/postcss-loader/lib?{}!./node_modules/less-loader/dist/cjs.js!./src/css/style.less
    Module build failed: TypeError: css.walkAtRules is not a function
        at Processor.remove (C:\Users\Dan\Desktop\projects\WeatherReactProject\node_modules\autoprefixer\lib\processor.js:175:13)
        at Object.plugin (C:\Users\Dan\Desktop\projects\WeatherReactProject\node_modules\autoprefixer\lib\autoprefixer.js:87:32)
        at Object.parseOptions (C:\Users\Dan\Desktop\projects\WeatherReactProject\node_modules\postcss-loader\lib\options.js:5:37)
        at Promise.resolve.then (C:\Users\Dan\Desktop\projects\WeatherReactProject\node_modules\postcss-loader\lib\index.js:68:27)
        at <anonymous>
        at process._tickCallback (internal/process/next_tick.js:188:7)
webpack: Failed to compile.

css.walkAtRules不是一个功能似乎是我的困境的来源但是。从配置的角度来看，一切似乎都很好。应该找到它。

任何想法？

谢谢！

Answer 1

我在同样的问题上挣扎并找到了解决方案。我也经历了应用autoprefixer的过程，该过程不起作用，也没有显示任何错误信息。

我不知道我的解决方案是否可以解决您的问题，但让我们试一试。我试图转换scss代码，这基本上与转换更少代码的过程相同。

我既未定义postcss.config.js也未定义.browserlistrc文件。相反，在webpack.config.js中，我首先

const autoprefixer = require('autoprefixer');

然后，我在webpack.config.js中设置了以下配置（这里的等价物更少）：

module: {
  rules: [
    // ... other rules ... 
    { 
      test: /\.less$/,
      loader: ExtractTextPlugin.extract(['css-loader',
      {
        loader: 'postcss-loader',
        options: {
          plugins: () => autoprefixer({
            browsers: ['last 3 versions', '> 1%']
          })
        }
      }, 'less-loader'])
    }
  // ... other rules ...
  ]
}, 
plugins: [
   // ... other plugins ...
   new ExtractTextPlugin({
    filename: '[name].css',
    allChunks: true,
  })
  // ... other plugins ...
]

据我所知，在大量论坛中我查找了这条信息，因此加载顺序为'css-loader'，'postcss-loader'，然后'less-loader'是至关重要的。在我的特定情况下，没有选项

它根本不起作用

{
  browsers: ['last 3 versions', '> 1%']
}

希望这会有所帮助......

Answer 2

我遇到了同样的问题并且我已正确修复，但在我的配置中，我使用了PostCSS样式的SCSS。克隆并查看PostCSS configuration on Webpack，它非常简单且工作正常。我不在这里写我的Webpack配置因为它很难阅读和使用。毫无疑问，我没有使用单独的PostCSS配置文件。只需在PostCSS配置文件中编写Webpack个配置文件即可。我倾向于将Webpack的开发和生产版本分开。看，如果有问题，请询问。我很乐意回答。

webpack with less和postcss autoprefixer

2 个答案: