Импорт CSS с веб-пакетом 3

Question

Я борюсь с импортом css в Webpack 3 (но попробовал даже понизить до 2.7) с приложением изоморфного реагирования - мне нужно импортировать css из внешней библиотеки, но я не могу понять, как отличить конфигурацию клиент / сервер для style-loader,

При импорте css примерно так:

import 'react-datepicker/dist/react-datepicker.css'

с предложенным style-loader соответственно css-loader конфигурации:

  module: {
    //...
    rules: [
      {
        test: /\.css$/,
        use: [ 'style-loader', 'postcss-loader' ]
      }
    ]

Я получаю сообщение об ошибке на сервере (запущенном babel-node), в котором говорится, что css импортируется как обычный модуль JS:

/.../node_modules/react-datepicker/dist/react-datepicker.css:1
(function (exports, require, module, __filename, __dirname) { .react-datepicker-popper[data-placement^="bottom"] .react-datepicker__triangle, .react-datepicker-popper[data-placement^="top"] .react-datepicker__triangle, .react-datepicker__year-read-view--down-arrow,
                                                              ^

SyntaxError: Unexpected token .
    at new Script (vm.js:51:7)
    at createScript (vm.js:138:10)
    at Object.runInThisContext (vm.js:199:10)
    at Module._compile (module.js:624:28)
    at Module._extensions..js (module.js:671:10)
    at Object.require.extensions.(anonymous function) [as .js] (/srv/lab/www/cosech/dev/node_modules/babel-register/lib/node.js:152:7)
    at Module.load (module.js:573:32)
    at tryModuleLoad (module.js:513:12)
    at Function.Module._load (module.js:505:3)
    at Module.require (module.js:604:17)

Я думал, что пакет, созданный webpack, может использоваться на клиенте и на сервере одинаково (если не используется специфичный для браузера API), но кажется, что это не так; Я старался isomorphic-style-loader вместо этого, но с теми же результатами.

Кто-нибудь знает, как импортировать CSS в сценарии сервер / клиент? (В случае с внешней библиотекой я мог бы просто скопировать файл css в общую папку и связать его oldschool способом в index.html, но я хотел бы знать, как сделать правильный импорт CSS, чтобы он был включен в комплект.)

Answer 1

Для CSS или таблиц стилей в целом используйте @import синтаксис.

Используя ваш в качестве примера,

@import '~react-datepicker/dist/react-datepicker.css';

Выше будет работать, если вы используете npm пакеты.

Answer 2

Попробуйте это так.

import cssStype from 'react-datepicker/dist/react-datepicker.css'