Question

我试图将auto prefixing添加到我的webpack中以添加ie9支持。说明在这里创建第二个配置：

postcss.config.js

module.exports = {
  plugins: [
    require('postcss-smart-import')({ /* ...options */ }),
    require('precss')({ /* ...options */ }),
    require('autoprefixer')({ /* ...options */ })
  ]
}

然后将PostCSS Loader添加到webpack.config.js。把它放在css-loader和style-loader之后。但是在sass-loader之前，如果你使用它。

所以我这样做了：

webpack.config.js

var path = require('path');
var webpack = require('webpack');
var ChunksPlugin = require('webpack-split-chunks');
// TODO add prefixer for  >= IE9

/**
 * Projects
 */
var projects = [
  'sample',
  'sample2'
];

// Prepare project paths for multiple entries
var entry_files = {};
projects.map(function(project_name, k){
          entry_files[project_name] = __dirname + "/apps/" + project_name + "/index.js";
    });

module.exports = {
    // devServer: {
    //     inline: true,
    //     contentBase: './samples/sample',
    //     port: 3000
    // },
    devtool: 'cheap-module-eval-source-map',
    entry: entry_files,
    module: {
        loaders: [
            {
                test: /\.js$/,
                loaders: ['babel'],
                exclude: /node_modules/
            },
            {
                test: /\.scss/,
                loader: 'style-loader!css-loader!sass-loader!postcss-loader?parser=custom-parser&exec&browsers=last 5 version'
            }
        ]
    },
    output: {
        path: __dirname +'/dis',
        filename:  '[name].min.js'
    },
    watch: true,
    plugins: [
        new webpack.optimize.OccurrenceOrderPlugin(),
        new ChunksPlugin({
           to: 'vendor',
           test: [/node_modules/, /shared/] // or an array of regex
       })
    ]
};

然后，当我运行它时，我收到此错误：

ERROR in ./~/css-loader!./~/sass-loader!./~/postcss-loader?parser=custom-parser&exec&browsers=last 5 version!./apps/sample/scss/app.scss
Module build failed: Error: Cannot find module 'postcss-smart-import'
    at Function.Module._resolveFilename (module.js:470:15)
    at Function.Module._load (module.js:418:25)
    at Module.require (module.js:498:17)
    at require (internal/module.js:20:19)
    at Object.<anonymous> (/Users/philllware/Projects/poc_react/postcss.config.js:3:5)
    at Module._compile (module.js:571:32)
    at requireFromString (/Users/philllware/Projects/poc_react/node_modules/require-from-string/index.js:27:4)
    at /Users/philllware/Projects/poc_react/node_modules/cosmiconfig/lib/loadJs.js:11:15
 @ ./apps/sample/scss/app.scss 4:14-224

我错过了什么？我是否必须采用不同的方式，因为它是通过JS加载的？

（使用"babel-core": "^6.10.4",）

由于

Webpack中的AutoPrefixer，SCSS无法正常工作

0 个答案: