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

【问题标题】：How can I import imported files with postcss-import and Webpack 2?如何使用 postcss-import 和 Webpack 2 导入导入的文件？
【发布时间】：2018-03-05 15:48:28
【问题描述】：

我可以使用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',
    },
  ],
},

我正在尝试导入使用 npm 安装的 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-loader v.2.0.6、postcss-import v.11.0 .0

【问题讨论】：

标签： javascript webpack postcss css-loader postcss-import

【解决方案1】：

您应该将 ident: 'postcss', 添加到您的 postcss-loader 配置中以使其正常工作：

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

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

【讨论】：