问题描述
最近，我们发现我们必须在我们的React项目中使用SSR.我检查了我所知道的每种方法，并几乎测试了我在中型站点和其他站点上发现的所有方法.经过大量的工作，我决定我们必须迁移到Next JS.
Recently we found out that we have to use SSR for Our React Project.I have checked with every method that I know and almost tested all methods that I've found on medium and other sites. And after a lot of work, I decided that we have to migrate to Next JS.
虽然所有内容的迁移过程都很好，但是对于样式表而言.
While the process of migrating everything is fine, but for the style sheets.
在旧版应用中，我们使用webpack将样式与项目捆绑在一起，一切都很好.
In the old version of our app, we used webpack to bundle our styles with the project and everything was fine.
这是webpack.config.js
This is the 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看起来像这样:
and after I migrated the app, my next.config.js looks like this:
// 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
},
}
))问题在于，所有内容均可正确呈现，但其中没有样式表，并且不包含任何样式.有谁可以帮助我解决这个问题?
The problem is that everything renders correctly but there are no stylesheets in it and it doesn't contain any style. Is there anybody who could help me to solve this problem?
推荐答案
仅使用node_modules中的CSS，就不需要此高级配置.
For just using CSS from node_modules you don't need this fancy config.
3个简单步骤:
- 安装next-css插件:
npm install --save @zeit/next-css
- 在根目录中创建next.config.js并包含以下内容:
// next.config.js
const withCSS = require('@zeit/next-css')
module.exports = withCSS({
cssLoaderOptions: {
url: false
}
})
- 现在您应该能够像这样从node_modules导入样式表:
import 'bootstrap-css-only/css/bootstrap.min.css';
注意:使用Next v 8 +
背景:我花了几个小时试图简单地导入作为node_module安装的CSS，并且各种解决方案大多都是棘手的解决方法，但是如上所示，有一个简单的解决方案.它由核心团队成员之一提供: https://spectrum.chat/next-js/general/ignoring-folders-files-specifically-fonts~4f68cfd5-d576-46b8-adc8-86e9d7ea0b1f
Background:I spent a few hours trying to simply import a CSS installed as a node_module and the various solutions are mostly hacky workarounds, but as shown above, there is a simple solution.It was provided by one of the core team members: https://spectrum.chat/next-js/general/ignoring-folders-files-specifically-fonts~4f68cfd5-d576-46b8-adc8-86e9d7ea0b1f
这篇关于从Create-React-App升级到Next.js-CSS样式表不起作用的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！