Импортировать 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
          }
        }
      ]
    })
  }

webpack css-loader webpack-style-loader
person Donald Taylor    schedule 27.03.2018    source источник
comment
Попробуйте @import '~react-select/dist/react-datetime.css';, тильда - это псевдоним для корня проекта   -  person Andy Ray    schedule 27.03.2018
comment
Это решило проблему. Спасибо! Если хочешь добавить ответ, я его приму ...   -  person Donald Taylor    schedule 27.03.2018
comment
Какой приятный сюрприз спустя 2 месяца! Я люблю фальшивые точки интернета   -  person Andy Ray    schedule 16.04.2018

Ответы (3)


arrow_upward
100
arrow_downward

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

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

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

person Andy Ray    schedule 27.03.2018
comment
Обратите внимание, что теперь это задокументировано: webpack.js.org/loaders/css-loader/ #url webpack.js.org/loaders/css-loader/# import Чтобы импортировать ресурсы из пути node_modules (включая resolve.modules) и для псевдонима, добавьте к нему префикс ~ Также обратите внимание, что это не основная функция веб-пакета, а функция css-loader. - person dosentmatter; 25.08.2019
comment
Мне по какой-то причине пришлось удалить расширение .css, чтобы оно работало - person vidstige; 27.05.2021

arrow_upward
2
arrow_downward

Если вы используете слишком много вещей из одной папки 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')
    ]
}

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

person viral    schedule 16.08.2019

arrow_upward
0
arrow_downward

Сегодня у меня была похожая проблема. В конце концов, все, что мне нужно было сделать, это настроить resolve в моем файле конфигурации веб-пакета. Надеюсь, это кому-нибудь поможет.

Версия Webpack, которую я использовал:

"webpack": "^4.37.0",

В конфигурационном файле webpack необходимо настроить следующее:

module.exports = {
  resolve: {
    extensions: ['.json', '.js', '.jsx'],
    modules: ['node_modules'],
  },

or

module.exports = {
  resolve: {
    alias: {
      'some-library': path.resolve(__dirname, './node_modules/some-library'),
    }
  },

В файле css мы можем получить доступ к библиотеке по относительному пути от node_modules:

@import '~some-library/src/some-css-file';
person mnishiguchi    schedule 06.09.2020