В настоящее время я создаю приложение для реагирования с рендерингом на стороне сервера. Я использую некоторые библиотеки, которые поставляются с 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';
работает.
Есть ли способ настроить webpack, что я могу импортировать эти файлы css обычно?
Здесь конфигурация server.js
для server.js
:
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()],
};
Это проблема webpack-node-externals
которая препятствует связыванию всех ресурсов, находящихся в node_modules
.
Вы можете использовать опцию " whitelist
чтобы избежать такого поведения.
Вот пример из документации webpack-node-externals
:
...
nodeExternals({
// load non-javascript files with extensions, presumably via loaders
whitelist: [/\.(?!(?:jsx?|json)$).{1,5}$/i],
}),
...
style-loader
?style-loader
@IzumiSy не работает для рендеринга на стороне сервера, поскольку он пытается получить доступ к окну, которого нет в узле. Я пробовалisomorphic-style-loader
но это та же проблема, что я описал выше.