如何使用postcss-import和Webpack 2导入导入的文件？

Question

我可以使用postcss-import来导入Bootstrap吗？

这里是我的WebPack配置的一部分：

{ 
    test: /\.css$/, 
    loaders: [ 
    { 
     loader: 'style-loader', 
    }, 
    { 
     loader: 'css-loader', 
     options: { 
     importLoaders: 1, 
     modules: true, 
     localIdentName: '[folder]__[local]___[hash:base64:5]', 
     }, 
    }, 
    { 
     loader: 'postcss-loader', 
    }, 
    ], 
}, 

而且我试图导入与故宫安装Bootstap：

@import 'bootstrap/dist/css/bootstrap.css'; 

而且我有一个错误：

./~/css-loader?{"importLoaders":1,"modules":true,"localIdentName":"[folder]__[local]___[hash:base64:5]"}!./~/postcss-loader/lib!./src/css/app.css 
Module not found: Error: Can't resolve '../fonts/glyphicons-halflings-regular.eot' in '/home/entry/Dev/project/src/css' 
@ ./~/css-loader?{"importLoaders":1,"modules":true,"localIdentName":"[folder]__[local]___[hash:base64:5]"}!./~/postcss-loader/lib!./src/css/app.css 6:4601-4653 6:4676-4728 
@ ./src/css/app.css 
@ ./src/js/backoffice/index.js 
@ ./src/main.js 
@ multi ./scripts/config/polyfills.js ./src/main.js 

./~/css-loader?{"importLoaders":1,"modules":true,"localIdentName":"[folder]__[local]___[hash:base64:5]"}!./~/postcss-loader/lib!./src/css/app.css 
Module not found: Error: Can't resolve '../fonts/glyphicons-halflings-regular.woff2' in '/home/entry/Dev/project/src/css' 
@ ./~/css-loader?{"importLoaders":1,"modules":true,"localIdentName":"[folder]__[local]___[hash:base64:5]"}!./~/postcss-loader/lib!./src/css/app.css 6:4778-4832 
@ ./src/css/app.css 
@ ./src/js/backoffice/index.js 
@ ./src/main.js 
@ multi ./scripts/config/polyfills.js ./src/main.js 

........ 

另外我使用url-loader作为默认加载程序

{ 
    exclude: [ 
     /\.html$/, 
     /\.js$/, 
     /\.css$/, 
     /\.json$/, 
    ], 
    loader: 'url-loader', 
    options: { 
     limit: 10000, 
     name: 'static/media/[name].[hash:8].[ext]', 
    }, 
    }, 

我使用的WebPack v.2.1.3，postcss装载机 v.2.0.6，postcss进口 v.11.0.0

Answer 1

您应该添加ident: 'postcss',到您的postcss-loader配置，使其工作：

{ 
    loader: 'postcss-loader', 
    options: { 
    ident: 'postcss', 
    } 
}, 

你可以阅读更多有关此问题：https://github.com/facebookincubator/create-react-app/issues/2677