javascript - webpack2 postcss-loader 使用 autoprefixer 无法生效
淡淡烟草味
淡淡烟草味 2017-06-14 10:51:47
[JavaScript讨论组]

1.package.json

"devDependencies": {
    "@types/jasmine": "2.5.36",
    "@types/node": "^6.0.45",
    "angular2-template-loader": "^0.6.0",
    "autoprefixer": "^7.1.1",
    "awesome-typescript-loader": "^3.0.4",
    "css-loader": "^0.26.1",
    "extract-text-webpack-plugin": "^2.1.0",
    "file-loader": "^0.9.0",
    "html-loader": "^0.4.3",
    "html-webpack-plugin": "^2.16.1",
    "jasmine-core": "^2.4.1",
    "karma": "^1.2.0",
    "karma-chrome-launcher": "^2.0.0",
    "karma-jasmine": "^1.0.2",
    "karma-sourcemap-loader": "^0.3.7",
    "karma-webpack": "^2.0.1",
    "node-sass": "^4.5.3",
    "null-loader": "^0.1.1",
    "postcss-loader": "^2.0.5",
    "raw-loader": "^0.5.1",
    "rimraf": "^2.5.2",
    "sass-loader": "^6.0.5",
    "style-loader": "^0.13.1",
    "typescript": "^2.3.4",
    "webpack": "2.2.1",
    "webpack-dev-server": "2.4.1",
    "webpack-merge": "^3.0.0"
  }

2.webpack.common.js

...
{
        test: /\.(scss|sass)$/,
        exclude: helpers.root('src', 'app'),
        loader: ExtractTextPlugin.extract({ fallback: 'style-loader', use: ['css-loader', 'postcss-loader', 'sass-loader'] })
      },
      {
        test: /\.(scss|sass)$/,
        include: helpers.root('src', 'app'),
        loader: 'raw-loader!postcss-loader!sass-loader'
      },
...
plugins: [

    new webpack.ContextReplacementPlugin(
      
      /angular(\\|\/)core(\\|\/)@angular/,
      helpers.root('./src'), 
      {}
    ),

    new webpack.LoaderOptionsPlugin({
      options: {
        postcss: [
          require('autoprefixer')()
        ]
      }
    }),

    new ExtractTextPlugin('style.css'),

    new webpack.optimize.CommonsChunkPlugin({
      name: ['app', 'vendor', 'polyfills']
    }),

    new HtmlWebpackPlugin({
      template: 'src/index.html'
    })
  ]

结果在浏览器中没有生效。

我尝试写 postcss.config.js ,同样没有生效 :(

3.postcss.config.js

module.exports = {
    pulgins: [
        require('autoprefixer')()
    ]
};

问题出在哪里呢?

淡淡烟草味
淡淡烟草味

全部回复(2)
PHP中文网
use: [
            {
              loader: 'css-loader',
              options: { autoprefixer: true, sourceMap: true, importLoaders: 1 }
            },
            {
              loader: 'postcss-loader',
              options: {
                sourceMap: true,
                plugins: () => [autoprefixer({ browsers: ['iOS >= 7', 'Android >= 4.1'] })],
              },
            },
            'sass-loader'
          ]
怪我咯

我试了下你的配置,完全可以啊,我自己是如下配置的。需要注意的一点是: 你需要在js里面导入css文件,在页面上style或者link,webpack打包并不会生效

        new webpack.LoaderOptionsPlugin({
            options: {
                postcss: function() {
                    return [require('autoprefixer')];
                }
            }
        }),
热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
关于我们 免责申明 意见反馈 讲师合作 广告合作 最新更新
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送
PHP中文网APP
随时随地碎片化学习
PHP中文网抖音号
发现有趣的

Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号