Пытаюсь импортировать css файл из node_modules внутри собственного component-а, но в результате не получаю никаких ошибок, как собственно и необходимых мне стилей в билде
next.config.js
const fs = require('fs');
const path = require('path');
const withSass = require('@zeit/next-sass');
const withPlugins = require('next-compose-plugins');
const withAntd = require('./next-antd.config');
const lessToJS = require('less-vars-to-js');
const FilterWarningsPlugin = require('webpack-filter-warnings-plugin');
require('dotenv').config();
const isDev = process.env.NODE_ENV !== 'production';
if(isDev) {
process.env["NODE_TLS_REJECT_UNAUTHORIZED"] = 0;
}
const antdVariables = lessToJS(fs.readFileSync(path.resolve(__dirname, './assets/variables.less'), 'utf8'));
// fix: prevents error when .less files are required by node
if (typeof require !== 'undefined') {
require.extensions['.less'] = file => { }
}
const nextConfig = {
webpack: config => {
config.plugins.push(
new FilterWarningsPlugin({
// ignore ANTD chunk styles [mini-css-extract-plugin] warning
exclude: /mini-css-extract-plugin[^]*Conflicting order between:/,
}),
);
return config;
},
env
};
module.exports = withPlugins([
[withSass, {
cssLoaderOptions: {
modules: true,
importLoaders: 1,
localIdentName: "[local]___[hash:base64:5]",
},
}],
[withAntd, {
cssModules: true,
cssLoaderOptions: {
sourceMap: false,
importLoaders: 1,
},
lessLoaderOptions: {
javascriptEnabled: true,
modifyVars: antdVariables,
},
}],
], nextConfig);
next-antd.config.js
const cssLoaderConfig = require('@zeit/next-css/css-loader-config');
module.exports = (nextConfig = {}) => ({
...nextConfig,
...{
webpack(config, options) {
if (!options.defaultLoaders) {
throw new Error(
'This plugin is not compatible with Next.js versions below 5.0.0 https://err.sh/next-plugins/upgrade',
);
}
const { dev, isServer } = options;
const { cssModules, cssLoaderOptions, postcssLoaderOptions, lessLoaderOptions = {} } = nextConfig;
// for all less in clint
const baseLessConfig = {
extensions: ['less'],
cssModules,
cssLoaderOptions,
postcssLoaderOptions,
dev,
isServer,
loaders: [
{
loader: 'less-loader',
options: lessLoaderOptions,
},
],
};
config.module.rules.push({
test: /\.less$/,
exclude: /node_modules/,
use: cssLoaderConfig(config, baseLessConfig),
});
// for antd less in client
const antdLessConfig = {
...baseLessConfig,
...{ cssModules: false, cssLoaderOptions: {}, postcssLoaderOptions: {} },
};
config.module.rules.push({
test: /\.less$/,
include: /node_modules/,
use: cssLoaderConfig(config, antdLessConfig),
});
// for antd less in server (yarn build)
if (isServer) {
const antdStyles = /antd\/.*?\/style.*?/;
const rawExternals = [...config.externals];
config.externals = [
(context, request, callback) => {
if (request.match(antdStyles)) {
return callback();
}
if (typeof rawExternals[0] === 'function') {
rawExternals[0](context, request, callback);
} else {
callback();
}
},
...(typeof rawExternals[0] === 'function' ? [] : rawExternals),
];
config.module.rules.unshift({
test: antdStyles,
use: 'null-loader',
});
}
if (typeof nextConfig.webpack === 'function') {
return nextConfig.webpack(config, options);
}
return config;
},
},
});
Я пробовал импортировать @zeit/next-css и добавить его в withPlugins, но это тоже не дало желаемого эффекта