使用WebPack 3导入CSS

Question

我在WebPack 3中导入的CSS苦苦区分style-loader的客户端/服务器配置。

在类似的情况下导入CSS时：

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

建议的style-loader resp。css-loader配置：

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

我在服务器上收到一个错误(由Babel节点运行(，这表明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创建的捆绑包在客户端和服务器上都可以使用相同的方式(当不使用特定于Brower的API时(，但似乎不是真的。我尝试了isomorphic-style-loader，但结果相同。

有人知道如何在服务器/客户端方案中导入CSS吗？(对于外部库，我可以将CSS文件复制到一个公共文件夹中，然后将其链接到index.html中的OldSchool方式，但我想知道如何进行适当的CSS导入，以便将其包含在Bundle中。(

Answer 1

尝试这样。

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

Answer 2

通常用于CSS或样式表，通常使用@import语法。

以您的例子为例，

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

假设您正在使用npm软件包，以上将有效。