Reactjs 如何在component next.js中导入css文件?
我正试图将一个css文件从node_模块库导入到我的组件中,但结果是我没有得到任何错误,并且在构建文件中需要样式 next.config.jsReactjs 如何在component next.js中导入css文件?,reactjs,webpack,next.js,Reactjs,Webpack,Next.js,我正试图将一个css文件从node_模块库导入到我的组件中,但结果是我没有得到任何错误,并且在构建文件中需要样式 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 = requir
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);
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;
},
},
});
下一个antd.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);
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并添加插件,但这也没有达到预期效果
我知道可以将样式添加到in布局中,但我想知道如何在next.js项目的React组件中实现这一点