从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以及CSS`url 中的```tilde是什么()`做什么？