1. Konfigurasikan postcss.config.js mengikut laman web rasmi
module.exports = {
plugins: [
require('autoprefixer')
]
}
2 Kemudian dalam webpack.config.js
{
test:/\.css$/,
use: [
{
loader: 'style-loader'
},
{
loader: 'css-loader',
options: { importLoaders: 1 }
},
{
loader: 'postcss-loader'
}
]
}
3 Kemudian jalankan webpack dan ralat akan muncul
ERROR in ./~/css-loader?{"importLoaders":1}!./~/.2.0.6@postcss-loader/lib!./app/
common.css
Module 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:\Users\jj\Desktop\webpack\node_modules\.1.7.7@brows
erslist\index.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:\Users\jj\Desktop\webpack\node_modules\.6.7.7@autop
refixer\lib\autoprefixer.js:5:18)
at Object.<anonymous> (C:\Users\jj\Desktop\webpack\node_modules\.6.7.7@autop
refixer\lib\autoprefixer.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:\Users\jj\Desktop\webpack\postcss.config.js:3:5)
at Module._compile (module.js:570:32)
at requireFromString (C:\Users\jj\Desktop\webpack\node_modules\.1.2.1@requir
e-from-string\index.js:27:4)
at C:\Users\jj\Desktop\webpack\node_modules\.2.1.3@cosmiconfig\lib\loadJs.js
:11:15
@ ./app/common.css 4:14-136
@ ./app/index.js
4. Kosongkan postcss.config.js dan ubah suai webpack.config.js gagal sekali lagi dan ralatnya sama seperti langkah sebelumnya.
{
loader: 'postcss-loader',
options: {
plugins: (loader) => [
require('autoprefixer')()
]
}
}
5 Ikuti kaedah yang terdapat dalam talian
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
6 Jika anda mengeluarkan bahagian postcss, tidak akan ada masalah dan ia akan berjalan seperti biasa
Seven. Saya benar-benar berasa seperti tidak dapat memahaminya package.json.webpack yang dilampirkan bukan sahaja dipasang secara global, tetapi juga --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"
}
}
Saya tidak tahu sebab khusus, jadi saya hanya akan menyiarkan konfigurasi saya...
post.config.js
webpack2
Jika itu tidak berkesan, saya akan berikan alamat gudang kepada anda... https://github.com/mqyqingfen...
Adakah baru tenggelam begini...
Nampaknya tiada masalah, anda boleh cuba menukar autoprefixer kepada versi sebelumnya, atau padam node_modules dan re-npm install