1

我正在努力在 Webpack 3（但尝试降级到 2.7）驱动的同构反应应用程序中导入 css - 我需要导入外部库的 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 文件复制到公共文件夹并在 index.html 中以老式方式链接它，但我想知道如何进行正确的 css 导入，以便将其包含在包中.)

4

2 回答 2

0

像这样试试。

import cssStype from 'react-datepicker/dist/react-datepicker.css'
于 2018-02-12T04:58:48.660 回答
0

对于一般的 CSS 或样式表，请使用@import语法。

以你的为例，

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

假设您使用的是npm软件包，上述内容将起作用。

于 2018-02-12T07:09:28.937 回答