Импортировать CSS из "node_modules" в Webpack

Некоторые сторонние модули, которые я использую, имеют свои собственные файлы CSS. Я хотел бы включить их в свой одно приложение, один CSS файл, который обрабатывается Webpack. Как файлы CSS под "node_modules" импортируются в мой CSS файл?

Например, я использую сторонний модуль react-select, но я не могу импортировать его файл CSS из node_modules:

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

Соответствующий загрузчик в webpack.config.js:

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

Ответ 1

Вы можете импортировать файлы, относящиеся к корневому каталогу вашего проекта (разрешая node_modules/ из корневой папки), добавив префикс с тильдой ~:

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

Это плохо документированное соглашение Webpack (избыточная фраза), см. https://github.com/webpack-contrib/css-loader/issues/12#issuecomment-41940311 и Что делает '~' тильда в CSS 'url()'?

Ответ 2

Если вы используете слишком много вещей из одной папки node_modules, вы также можете создать псевдоним, передав следующую опцию

options: {
    url: false,
    includePaths: [
        // this one for using node_modules as a base folder
        path.resolve('node_modules'),
        // this one for using sass as the base folder
        path.resolve('node_modules/flag-icon-css/sass')
    ]
}

После настройки вы можете импортировать данные так, как пытались ответить на них.