javascript - postcss-loader在webpack2的使用.

问题描述

一. 按照官网的做法,配置postcss.config.js

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

二. 然后在webpack.config.js里面

{ test:/.css$/, use: [ { loader: ’style-loader’ }, { loader: ’css-loader’,options: { importLoaders: 1 } }, { loader: ’postcss-loader’ } ] }

三. 然后运行webpack 会出现报错

ERROR in ./~/css-loader?{'importLoaders':1}!./~/.2.0.6@postcss-loader/lib!./app/common.cssModule build failed: Error: Cannot find module ’caniuse-db/data.json’ at Function.Module._resolveFilename (module.js:469:15) at Function.Module._load (module.js:417:25) at Module.require (module.js:497:17) at require (internal/module.js:20:19) at Object.<anonymous> (C:UsersjjDesktopwebpacknode_modules.1.7.7@browserslistindex.js:5:46) at Module._compile (module.js:570:32) at Object.Module._extensions..js (module.js:579:10) at Module.load (module.js:487:32) at tryModuleLoad (module.js:446:12) at Function.Module._load (module.js:438:3) at Module.require (module.js:497:17) at require (internal/module.js:20:19) at Object.<anonymous> (C:UsersjjDesktopwebpacknode_modules.6.7.7@autoprefixerlibautoprefixer.js:5:18) at Object.<anonymous> (C:UsersjjDesktopwebpacknode_modules.6.7.7@autoprefixerlibautoprefixer.js:92:4) at Module._compile (module.js:570:32) at Object.Module._extensions..js (module.js:579:10) at Module.load (module.js:487:32) at tryModuleLoad (module.js:446:12) at Function.Module._load (module.js:438:3) at Module.require (module.js:497:17) at require (internal/module.js:20:19) at Object.<anonymous> (C:UsersjjDesktopwebpackpostcss.config.js:3:5) at Module._compile (module.js:570:32) at requireFromString (C:UsersjjDesktopwebpacknode_modules.1.2.1@require-from-stringindex.js:27:4) at C:UsersjjDesktopwebpacknode_modules.2.1.3@cosmiconfiglibloadJs.js:11:15 @ ./app/common.css 4:14-136 @ ./app/index.js

四. 清空postcss.config.js, 修改webpack.config.js,再次失败 报错和上一步一样.

{ loader: ’postcss-loader’, options: { plugins: (loader) => [require(’autoprefixer’)() ] } }

五. 按照网上找到的方法

new webpack.LoaderOptionsPlugin({ options: {postcss: function() { return [require(’autoprefixer’)];} }}),根据网上做法npm i webpack-loader-options-merge --save-dev然后在webpack.config.js加入var loaderOptionsMerge = require(’webpack-loader-options-merge’);loaderOptionsMerge(webpackConfigObject);webpack(webpackConfigObject);我不明白new webpack.LoaderOptionsPlugin这里为什么这样写而且也会报错loaderOptionsMerge(webpackConfigObject); ^ReferenceError: webpackConfigObject is not defined

六.去掉postcss的部分则没有任何问题,正常运行.所有问题应该就出在这里了

七.真感觉搞不定了.附上package.json.webpack不仅全局安装了,也--save-dev了.

{ 'name': 'webpack', 'version': '1.0.0', 'description': '', 'main': 'webpack.config.js', 'scripts': { 'test': 'echo 'Error: no test specified' && exit 1', 'bulid': 'webpack', 'start': 'webpack-dev-server --env development', 'lint': 'eslint app/ webpack.*.js --cache' }, 'author': '', 'license': 'ISC', 'devDependencies': { 'autoprefixer': '^7.1.1', 'css-loader': '^0.28.4', 'eslint': '^4.0.0', 'eslint-loader': '^1.8.0', 'html-webpack-plugin': '^2.28.0', 'less': '^2.7.2', 'less-loader': '^4.0.4', 'postcss': '^6.0.2', 'postcss-loader': '^2.0.6', 'style-loader': '^0.18.2', 'webpack': '^2.6.1', 'webpack-dev-server': '^2.4.5', 'webpack-loader-options-merge': '0.0.3' }}

问题解答

我也不知道具体的原因所在，就贴上我的配置吧……

post.config.js

module.exports = { plugins: [ require(’autoprefixer’)({browsers:’ios >= 8’}) ]}

webpack2

{ test: /.css$/, loaders: ['style-loader', 'css-loader', 'postcss-loader']}

实在不行，我把仓库地址给你…… https://github.com/mqyqingfen...

难道就这样沉了...

看着没问题，可以试试把autoprefixer换成以前的版本，还有就是把node_modules删了重新npm install