最近我们发现我们必须在我们的React项目中使用SSR。我已经检查了我所知道的每种方法，并且几乎测试了我在中型和其他网站上找到的所有方法。经过大量的工作，我决定我们必须迁移到Next JS。
虽然迁移一切的过程很好，但对于样式表。
在旧版本的应用程序中，我们使用webpack将我们的样式与项目捆绑在一起，一切都很好。
这是webpack.config.js
const HtmlWebpackPlugin = require('html-webpack-plugin');
const ExtractTextPlugin = require("extract-text-webpack-plugin");
const port = process.env.PORT || 3000;
const extractSCSS = new ExtractTextPlugin('./[name].css');
// const UglifyJS = require('uglifyjs-webpack-plugin');
module.exports = {
mode: 'development',
output: {
filename: 'bundle.[hash].js',
publicPath: '/'
},
devtool: 'source-map',
module: {
rules: [
// First Rule
{
test: /\.(js)$/,
exclude: /node_modules/,
use: ['babel-loader'],
},
// Second Rule
{
test: /\.scss$/,
use: ['css-hot-loader'].concat(extractSCSS.extract({
fallback: 'style-loader',
use: [
{
loader: 'css-loader?sourceMap',
options: { alias: { '../img': '../public/img' }, sourceMap: true }
},
{
loader: 'sass-loader',
options: {
sourceMap: true
}
}
]
}))
},
{
test: /\.css$/,
use: ['style-loader', 'css-loader']
},
{
test: /\.(png|svg|jpg|gif)$/,
use: [
'file-loader'
]
},
{
test: /\.(woff|woff2|eot|ttf|otf)$/,
use: [
'file-loader'
]
}
]
},
plugins: [
new HtmlWebpackPlugin({
template: 'public/index.html',
favicon: 'public/favicon.ico'
}),
extractSCSS,
],
devServer: {
host: 'localhost',
port: port,
historyApiFallback: true,
open: true
}
};在我迁移应用程序后，我的next.config.js看起来像这样：
// next.config.js
const withSass = require('@zeit/next-sass')
const withCSS = require('@zeit/next-css')
module.exports = withCSS( withSass(
{
webpack(config, options) {
config.module.rules.push({
test: /\.(png|jpg|gif|svg|eot|ttf|woff|woff2)$/,
use: {
loader: 'url-loader',
options: {
limit: 100000
}
}
},
)
return config
},
}
))问题是所有内容都正确呈现，但其中没有样式表，并且它不包含任何样式。有没有人可以帮我解决这个问题？
对于刚从node_modules使用CSS，您不需要这个花哨的配置。
3个简单步骤：
npm install --save @zeit/next-css
// next.config.js
const withCSS = require('@zeit/next-css')
module.exports = withCSS({
cssLoaderOptions: {
url: false
}
})
import 'bootstrap-css-only/css/bootstrap.min.css';
注意：使用Next v 8+
背景：我花了几个小时试图简单地导入一个安装为node_module的CSS，各种解决方案大多是hacky解决方法，但如上所示，有一个简单的解决方案。它由一个核心团队成员提供：https://spectrum.chat/next-js/general/ignoring-folders-files-specifically-fonts~4f68cfd5-d576-46b8-adc8-86e9d7ea0b1f
这不是一个真正的答案，但Next.js中的CSS只是SUCKS！我发现自己一直在努力使其发挥作用所以我决定遵循他们的文档并简单地使用：
const App = () => {
return (
{style}
<div/>
);
}
let style = (<style jsx>
{`
.someClass {}
`}
</style> )
export default App;
通过这种方式，您可以拥有常规HTML中的CSS，而无需任何外部导入
你不需要同时使用CSS和withSass插件。
如果您使用的是Sass，那么withSass插件会将其编译为CSS。
只需确保在Head组件内的_document.js文件中添加CSS文件的路径，如下所示：
<Head>
<link rel="stylesheet" href="/_next/static/style.css" />
</Head>
要导入css，您可以使用nextJS的Head组件。
import Head from 'next/head';
<Head>
<link rel="stylesheet" href="path of the css" />
</Head>