關于webpack2.0里面css-loader的參數(shù)ImportLoaders配置出錯
/*?webpack?2.0?*/ { test:?/\.css$/, use:?[ 'style-loader', { loader:?'css-loader?importLoaders=1', //?query:{ //? importLoaders?:?1 //?} }, { loader:?'postcss-loader', options:?{ plugins:function(){ return?[ require('autoprefixer')({ browsers:?["last?5?versions"] }) ]; } } } ] }
老師,在webpack2.0里面,如果是在一個CSS里面import另外一個CSS文件。
使用上面的loader配置,會報錯
ERROR?in?./~/css-loader?importLoaders=1!./~/postcss-loader?{}!./css/common.css Module?build?failed:?Error:?No?PostCSS?Config?found?in:?E:\webfrontend\npmstudy\webpack-first-demo\css ????at?Error?(native) ????at?E:\webfrontend\npmstudy\webpack-first-demo\node_modules\postcss-load-config\index.js:51:26 ?@?./~/css-loader?importLoaders=1!./~/postcss-loader?{}!./css/layer.css?3:10-134 ?@?./css/layer.css ?@?./index.js
我是按照postcss-loader的npm官網(wǎng)上的實例配置的
https://www.npmjs.com/package/postcss-loader
這是什么呢?
此題,我已經(jīng)在下面自問自答了各位。
2017-02-16
主要還是找不到post-css 的配置,你安裝了?postcss-load-config ?你可以在項目下新建一個 postcss.config.js 來解決,webpack 中就不用寫了
2017-06-29
Module?build?failed:?Error:?No?PostCSS?Config?found?in:?E:\webfrontend\npmstudy\webpack-first-demo\css
????at?Error?(native)
????at?E:\webfrontend\npmstudy\webpack-first-demo\node_modules\postcss-load-config\index.js:51:26
?@?./~/css-loader?importLoaders=1!./~/postcss-loader?{}!./css/layer.css?3:10-134
?@?./css/layer.css
?@?./index.js
對于一直抱著個錯誤,”Module?build?failed:?Error:?No?PostCSS?Config?found?in“
今天我仔細看了一下官方文檔,官網(wǎng)有作解釋:
webpack.config.js
{??
?loader:?'postcss-loader',??
????options:?{????
????????plugins:?(loader)?=>?[?????
?????????????require('postcss-import')({?
????????????????????root:?loader.resourcePath
?????????????????}),?????
?????????????require('postcss-cssnext')(),??????
?????????????require('autoprefixer')(),?????
?????????????require('cssnano')()???
?????????]
??}}
官網(wǎng):https://www.npmjs.com/package/postcss-loader。
著這里我貼出我的代碼:
module.exports = {
//配置生成source maps,選擇合適的選項
devtool:'eval-source-map',
//入口
entry:__dirname + "/app/main.js",
//輸出
output:{
path:__dirname + "/dist/js",
filename:"bundle.js"
},
//Loader
module: {
? ?loaders: [
? ?{
? ? ? ? ? ?test: /\.json$/,
? ? ? ? ? ?loader: "json-loader"
? ? ? ?},
? ?{
? ? test:/\.js$/,
? ? exclude:/node_modules/,
? ? loader:'babel-loader',
? ? query:{
? ? presets:['es2015','react']
? ? }
? ?},
? ?{
? ? test:/\.css$/,
? ? //loader:'style-loader!css-loader!postcss-loader' //添加對樣式表的處理
? ? use:[
? ? {
? ? loader:'style-loader'
? ? },
? ? {
? ? loader:'css-loader',
? ? options:{
? ? importLoaders:1
? ? }
? ? },
? ? {
? ? loader:'postcss-loader',
? ? options: { ? ? ? ? ? // 如果沒有options這個選項將會報錯 No PostCSS Config found
? ? ? ? ? ? ? ? ? ? ? ? ? ? plugins: (loader) => [
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? require('postcss-import')({root: loader.resourcePath}),
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? require('postcss-cssnext')(),
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? require('autoprefixer')(), //CSS瀏覽器兼容
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? require('cssnano')() ?//壓縮css
? ? ? ? ? ? ? ? ? ? ? ? ? ? ]
? ? ? ? ? ? ? ? ? ? ? ? }
? ? }
? ? ]
? ?},
? ?]
},
}
2017-06-24
加上這個參數(shù)?
2017-06-12
2017-06-02
以上代碼后打包成功,但是運行報錯
請問是怎么解決呢?
2017-05-10
大神,你好,我現(xiàn)在就是按照你上面的寫的配置的,但是還是說postcss的配置沒找到,以下是源碼和報錯截圖,麻煩大神看看
2017-04-13
在 require('autoprefixer') 之前加入?require('precss') 就可以了,不過還是不太明白原理,precss 插件從介紹來看應該是用來支持saas語法的。
webpack.LoaderOptionsPlugin 是webpack 1 向 2 遷移時用的方法。
2017-04-06
附上LESS 方法
{
? ?test: /\.less$/,
? ?use: [
? ? ? ?'style-loader', 'css-loader', {
? ? ? ? ? ?loader: "postcss-loader",
? ? ? ? ? ?options: {
? ? ? ? ? ? ? ?plugins: function() {
? ? ? ? ? ? ? ? ? ?return [
? ? ? ? ? ? ? ? ? ? ? ?require('autoprefixer')
? ? ? ? ? ? ? ? ? ?];
? ? ? ? ? ? ? ?}
? ? ? ? ? ?}
? ? ? ?}, 'less-loader'
? ?]
}
2017-04-06
附上 ?less ?配置
{
? ?test: /\.less$/,
? ?use: [
? ? ? ?'style-loader', 'css-loader', {
? ? ? ? ? ?loader: "postcss-loader",
? ? ? ? ? ?options: {
? ? ? ? ? ? ? ?plugins: function() {
? ? ? ? ? ? ? ? ? ?return [
? ? ? ? ? ? ? ? ? ? ? ?require('autoprefixer')
? ? ? ? ? ? ? ? ? ?];
? ? ? ? ? ? ? ?}
? ? ? ? ? ?}
? ? ? ?}, 'less-loader'
? ?]
}
2017-04-06
rules: [
? ?{
? ? ? ?test: /\.js$/,
? ? ? ?include: path.resolve(__dirname,'src'),
? ? ? ?exclude: path.resolve(__dirname,'node_modules'),
? ? ? ?loader: "babel-loader"
? ?},
? ?{
? ? ? ?test: /\.css$/,
? ? ? ?use: [
? ? ? ? ? ?'style-loader', {
? ? ? ? ? ? ? ?loader: 'css-loader',
? ? ? ? ? ? ? ?options: {
? ? ? ? ? ? ? ? ? ?// modules: true // 設置css模塊化
? ? ? ? ? ? ? ?}
? ? ? ? ? ?}, {
? ? ? ? ? ? ? ?loader: 'postcss-loader',
? ? ? ? ? ? ? ?options: {
? ? ? ? ? ? ? ? ? ?plugins: function() {
? ? ? ? ? ? ? ? ? ? ? ?return [
? ? ? ? ? ? ? ? ? ? ? ? ? ?require('precss'),
? ? ? ? ? ? ? ? ? ? ? ? ? ?require('autoprefixer')
? ? ? ? ? ? ? ? ? ? ? ?];
? ? ? ? ? ? ? ? ? ?}
? ? ? ? ? ? ? ?}
? ? ? ? ? ?}
? ? ? ?]
? ?}
//require('precss'), ?加上這個就可以了 ?不用加額外的東西 ?安裝下 precss ? webpack2 ?不支持css-loader 后面加參數(shù)了。。。。