webpack - 在 Webpack 中从 "node_modules"导入 CSS

Question

我使用的一些第三方模块有自己的 CSS 文件。我想将它们包含在我的应用程序的单个 CSS 文件中，该文件由 Webpack 处理。如何将“node_modules”下的 CSS 文件导入到我的 CSS 文件中？

比如我用的是第三方react-select模块，但我无法从 node_modules 导入其 CSS 文件:

@import 'react-select/dist/react-datetime.css';

webpack.config.js 中的相关加载程序:

  {
    test: /\.css$/,
    use: ExtractTextPlugin.extract({
      use: [
        {
          loader: 'css-loader',
          options: {
            url: false
          }
        }
      ]
    })
  }

Answer 1

您可以通过在前面加上波浪号 node_modules/ 来导入相对于项目根目录的文件(从根文件夹解析 ~)。 :

@import '~react-select/dist/react-datetime.css';

这是一个记录不充分的 Webpack(一个多余的短语)约定，请参阅 https://github.com/webpack-contrib/css-loader/issues/12#issuecomment-41940311和 What does a `~` tilde in a CSS `url()` do?