从Create-React-App升级到Next.js - CSS样式表不起作用
[英]Upgrading From Create-React-App to Next.js - CSS stylesheets are not working
问题描述
Recently we found out that we have to use SSR for Our React Project. 
最近我们发现我们必须在我们的React项目中使用SSR。 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. 经过大量的工作，我决定我们必须迁移到Next JS。
While the process of migrating everything is fine, but for the style sheets. 虽然迁移一切的过程很好，但对于样式表。
In the old version of our app, we used webpack to bundle our styles with the project and everything was fine. 在旧版本的应用程序中，我们使用webpack将我们的样式与项目捆绑在一起，一切都很好。
This is the webpack.config.js 这是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 } };
and after I migrated the app, my next.config.js looks like this: 在我迁移应用程序后，我的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 }, } ))
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? 有没有人可以帮我解决这个问题？
4 个解决方案
解决方案1
4 2019-03-20 08:08:59
For just using CSS from node_modules you don't need this fancy config. 对于刚从node_modules使用CSS，您不需要这个花哨的配置。
3 simple steps: 3个简单步骤：
- Install next-css plugin: 安装next-css插件：
npm install --save @zeit/next-css
- Create in your root directory next.config.js with the following content: 使用以下内容在根目录next.config.js中创建：
// next.config.js
const withCSS = require('@zeit/next-css')
module.exports = withCSS({
cssLoaderOptions: {
url: false
}
})
- Now you should be able to import styleshets from node_modules like this: 现在你应该可以从node_modules导入样式，如下所示：
import 'bootstrap-css-only/css/bootstrap.min.css';
Note: Using Next v 8+ 注意：使用Next v 8+
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. 背景：我花了几个小时试图简单地导入一个安装为node_module的CSS，各种解决方案大多是hacky解决方法，但如上所示，有一个简单的解决方案。 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 它由一个核心团队成员提供： https ： //spectrum.chat/next-js/general/ignoring-folders-files-specifically-fonts〜4f68cfd5-d576-46b8-adc8-86e9d7ea0b1f
解决方案2
0 2018-10-07 12:52:06
This is not a real answer but CSS in Next.js is just SUCKS! 这不是一个真正的答案，但Next.js中的CSS只是SUCKS！ I find myself constantly struggle to make it work so what I decided is to follow their docs and simply use: 我发现自己一直在努力使其发挥作用所以我决定遵循他们的文档并简单地使用：
const App = () => {
return (
{style}
<div/>
);
}
let style = (<style jsx>
{`
.someClass {}
`}
</style> )
export default App;
This way you can have CSS as you might have in regular HTML without any external imports 通过这种方式，您可以拥有常规HTML中的CSS，而无需任何外部导入
解决方案3
0 2018-10-08 04:36:51
You don't need both withCSS & withSass plugins. 你不需要同时使用CSS和withSass插件。
If you are using Sass the withSass plugin will compile it to CSS. 如果您使用的是Sass，那么withSass插件会将其编译为CSS。
Just make sure you add the path to the CSS file in your _document.js file inside the Head component like this: 只需确保在Head组件内的_document.js文件中添加CSS文件的路径，如下所示：
<Head>
<link rel="stylesheet" href="/_next/static/style.css" />
</Head>
解决方案4
0 2018-10-16 06:53:54
For importing css you can use Head component of the nextJS. 要导入css，您可以使用nextJS的Head组件。
import Head from 'next/head';
<Head>
<link rel="stylesheet" href="path of the css" />
</Head>
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.