使用webpack目标节点从node_modules导入css

我目前正在build立一个服务器端渲染反应的应用程序。 我正在使用一些与CSS文件来的库。 当我尝试像这样导入它们时:

import 'leaflet/dist/leaflet.css'; 

我在我的server.js得到以下错误:

 /my/app/path/node_modules/leaflet/dist/leaflet.css:3 .leaflet-pane, ^ SyntaxError: Unexpected token . at createScript (vm.js:74:10) at Object.runInThisContext (vm.js:116:10) at Module._compile (module.js:533:28) at Object.Module._extensions..js (module.js:580:10) at Module.load (module.js:503:32) at tryModuleLoad (module.js:466:12) at Function.Module._load (module.js:458:3) at Module.require (module.js:513:17) at require (internal/module.js:11:18) at Object.__webpack_exports__.a (/my/app/path/server.js:725:18) 

导入

 import '../../node_modules/leaflet/dist/leaflet.css'; 

作品。

有没有办法configurationwebpack,我可以正常导入这些css文件?

这里是server.js的webpackconfiguration:

 const nodeExternals = require('webpack-node-externals'); const postcssImport = require('postcss-import'); const cssnext = require('postcss-cssnext'); const cssnano = require('cssnano'); module.exports = { entry: './src/server.js', output: { filename: 'server.js', path: __dirname, }, module: { rules: [ { test: /\.js$/, loader: 'babel-loader', exclude: /node_modules/, options: { presets: [ 'react', ['env', { modules: false, targets: { node: process.versions.node, }, }], ], }, }, { test: /\.css$/, use: [ 'css-loader', { loader: 'postcss-loader', options: { plugins: [ postcssImport, cssnext, cssnano({ safe: true, autoprefixer: false, }), ], }, }, ], }, { test: /\.png$/, use: ['url-loader?limit=100000'], }, ], }, target: 'node', externals: [nodeExternals()], };