Webpack SCSS 和 autoprefixer 不能一起工作

Question

拥有以下用于资产编译的 webpack 配置，我无法让 autoprefixer 工作。提取的 css 没有得到所需的前缀。

var webpack = require('webpack'),
    precss       = require('precss'),
    autoprefixer = require('autoprefixer'),
    ExtractTextPlugin = require('extract-text-webpack-plugin'),
    path = require('path');



const sassLoaders = [
    'css-loader!autoprefixer-loader?browsers=last 2 version',
    'postcss-loader',
    'sass-loader?indentedSyntax=sass&includePaths[]=' + path.resolve(__dirname, '.')
]

const config = {
    entry: {
        //nsb: ['./js/nsb']
        dashboard: ['./js/dashboard']
    },
    module: {
        loaders: [
            {
                test: /\.sass$/,
                loader: ExtractTextPlugin.extract('style-loader', sassLoaders.join('!'))
            },
            {
                test: /\.scss$/,
                loader: ExtractTextPlugin.extract('css!sass')
            },
            {
                test:   /\.docs\.css$/,
                loader: "style-loader!css-loader!postcss-loader?pack=cleaner"
            },
            {
                test:   /\.css$/,
                loader: "style-loader!css-loader!postcss-loader"
            },

            { test: /\.woff(2)?(\?v=[0-9]\.[0-9]\.[0-9])?$/, loader: "url-loader?limit=10000&mimetype=application/font-woff" },
            { test: /\.(ttf|eot|svg)(\?v=[0-9]\.[0-9]\.[0-9])?$/, loader: "file-loader" }
        ]
    },
    postcss: function () {
        return {
            defaults: [precss, autoprefixer],
            cleaner:  [autoprefixer({ browsers: [] })]
        };
    },
    output: {
        filename: '[name].js',
        path: path.join(__dirname, './build'),
        publicPath: '/bundles/dashboard/build/'
    },
    amd: {jQuery: true},
    plugins: [
        new ExtractTextPlugin('[name].css'),
        new webpack.ProvidePlugin({
            $: "jquery",
            jQuery: "jquery"
        }),
        new webpack.optimize.CommonsChunkPlugin('vendor', 'vendor.js', Infinity)
    ],
    /* postcss: [
        autoprefixer({
            browsers: ['last 2 versions']
        })
    ],
    */
    resolve: {
        alias: {
            jquery: 'node_modules/jquery/dist/jquery.js',
            magnificPopup: 'node_modules/maginific-popup/dist/jquery.magnific-popup.js' //JQuery Plugin
        },

        modulesDirectories: ['./js', 'node_modules'],
        extensions: ['', '.js', '.sass'],
        root: [path.join(__dirname, './')]
    }
}

module.exports = config;

Answer 1

您可以尝试以下代码，注意在 css-loader 和 postcss-loader 之间添加了“?-autoprefixer”。

var webpack = require('webpack'),
precss       = require('precss'),
autoprefixer = require('autoprefixer'),
ExtractTextPlugin = require('extract-text-webpack-plugin'),
path = require('path');
const sassLoaders = [
'css-loader!autoprefixer-loader?browsers=last 2 version',
'postcss-loader',
'sass-loader?indentedSyntax=sass&includePaths[]=' + path.resolve(__dirname, 
'.')
]

const config = {
entry: {
    //nsb: ['./js/nsb']
    dashboard: ['./js/dashboard']
},
module: {
    loaders: [
        {
            test: /\.sass$/,
            loader: ExtractTextPlugin.extract('style-loader', sassLoaders.join('!'))
        },
        {
            test: /\.scss$/,
            loader: ExtractTextPlugin.extract('css!sass')
        },
        {
            test:   /\.docs\.css$/,
            loader: "style-loader!css-loader?-autoprefixer!postcss-loader?pack=cleaner"
        },
        {
            test:   /\.css$/,
            loader: "style-loader!css-loader?-autoprefixer!postcss-loader"
        },

        { test: /\.woff(2)?(\?v=[0-9]\.[0-9]\.[0-9])?$/, loader: "url-loader?limit=10000&mimetype=application/font-woff" },
        { test: /\.(ttf|eot|svg)(\?v=[0-9]\.[0-9]\.[0-9])?$/, loader: "file-loader" }
    ]
},
postcss: function () {
    return {
        defaults: [precss, autoprefixer],
        cleaner:  [autoprefixer({ browsers: [] })]
    };
},
output: {
    filename: '[name].js',
    path: path.join(__dirname, './build'),
    publicPath: '/bundles/dashboard/build/'
},
amd: {jQuery: true},
plugins: [
    new ExtractTextPlugin('[name].css'),
    new webpack.ProvidePlugin({
        $: "jquery",
        jQuery: "jquery"
    }),
    new webpack.optimize.CommonsChunkPlugin('vendor', 'vendor.js', Infinity)
],
/* postcss: [
    autoprefixer({
        browsers: ['last 2 versions']
    })
],
*/
resolve: {
    alias: {
        jquery: 'node_modules/jquery/dist/jquery.js',
        magnificPopup: 'node_modules/maginific-popup/dist/jquery.magnific-popup.js' //JQuery Plugin
    },

    modulesDirectories: ['./js', 'node_modules'],
    extensions: ['', '.js', '.sass'],
    root: [path.join(__dirname, './')]
}
}

module.exports = config;

还有一点：在我项目的根目录中，我还有一个 postcss.config.js ，内容如下：

module.exports = {
parser: 'postcss-scss',
plugins: [
    require('autoprefixer'),
]
}

Answer 2

css-loader 带有它自己的 autoprefixer 配置，您需要禁用它才能使您的配置正常工作。因此，无论您有 css-loader，您都需要添加以禁用 css-loader 自动前缀。

css-loader?-autoprefixer

更多信息可以找到here & here

所以你的配置看起来像这样

var webpack = require('webpack'),
  precss       = require('precss'),
  autoprefixer = require('autoprefixer'),
  ExtractTextPlugin = require('extract-text-webpack-plugin'),
  path = require('path');



const sassLoaders = [
  'css-loader?-autoprefixer!autoprefixer-loader?browsers=last 2 version',
  'postcss-loader',
  'sass-loader?indentedSyntax=sass&includePaths[]=' + path.resolve(__dirname, '.')
]

const config = {
  entry: {
    //nsb: ['./js/nsb']
    dashboard: ['./js/dashboard']
  },
  module: {
    loaders: [
      {
        test: /\.sass$/,
        loader: ExtractTextPlugin.extract('style-loader', sassLoaders.join('!'))
      },
      {
        test: /\.scss$/,
        loader: ExtractTextPlugin.extract('css!sass')
      },
      {
        test:   /\.docs\.css$/,
        loader: "style-loader!css-loader?-autoprefixer!postcss-loader?pack=cleaner"
      },
      {
        test:   /\.css$/,
        loader: "style-loader!css-loader?-autoprefixer!postcss-loader"
      },

      { test: /\.woff(2)?(\?v=[0-9]\.[0-9]\.[0-9])?$/, loader: "url-loader?limit=10000&mimetype=application/font-woff" },
      { test: /\.(ttf|eot|svg)(\?v=[0-9]\.[0-9]\.[0-9])?$/, loader: "file-loader" }
    ]
  },
  postcss: function () {
    return {
      defaults: [precss, autoprefixer],
      cleaner:  [autoprefixer({ browsers: [] })]
    };
  },
  output: {
    filename: '[name].js',
    path: path.join(__dirname, './build'),
    publicPath: '/bundles/dashboard/build/'
  },
  amd: {jQuery: true},
  plugins: [
    new ExtractTextPlugin('[name].css'),
    new webpack.ProvidePlugin({
      $: "jquery",
      jQuery: "jquery"
    }),
    new webpack.optimize.CommonsChunkPlugin('vendor', 'vendor.js', Infinity)
  ],
  /* postcss: [
    autoprefixer({
    browsers: ['last 2 versions']
    })
    ],
    */
  resolve: {
    alias: {
      jquery: 'node_modules/jquery/dist/jquery.js',
      magnificPopup: 'node_modules/maginific-popup/dist/jquery.magnific-popup.js' //JQuery Plugin
    },

    modulesDirectories: ['./js', 'node_modules'],
    extensions: ['', '.js', '.sass'],
    root: [path.join(__dirname, './')]
  }
}

module.exports = config;

另外，我认为您可以删除 autoprefixer-loader 中的 sassLoaders，因为您使用的是带有自动前缀的 PostCSS。