配置next.config文件 [英] Configuring next.config file
问题描述
我正在使用Next.js，并想添加 react-semantic-ui 以便使用他们的登录组件之一.
I am using Next.js and want to add the react-semantic-ui, to use one of their login components.
在前端出现此错误: 编译失败
On the front-end I am getting this error: Failed to compile
./node_modules/semantic-ui-css/semantic.min.css
ModuleParseError: Module parse failed: Unexpected character '' (1:0)
You may need an appropriate loader to handle this file type.
(Source code omitted for this binary file)
这是登录组件:
import React from 'react'
import { Button, Form, Grid, Header, Image, Message, Segment } from 'semantic-ui-react'
const Login = () => (
/* login JSX markup */
)
export default Login
这是我的next.config.js
This is my next.config.js
module.exports = {
webpack: (config, { dev }) => {
config.module.rules.push(
{
test: /\.css$/,
loader: 'style-loader!css-loader'
},
{
test: /\.s[a|c]ss$/,
loader: 'sass-loader!style-loader!css-loader'
},
{
test: /\.(png|svg|eot|otf|ttf|woff|woff2)$/,
use: {
loader: "url-loader",
options: {
limit: 100000,
publicPath: "./",
outputPath: "static/",
name: "[name].[ext]"
}
}
},
{
test: [/\.eot$/, /\.ttf$/, /\.svg$/, /\.woff$/, /\.woff2$/],
loader: require.resolve('file-loader'),
options: {
name: '/static/media/[name].[hash:8].[ext]'
}
}
)
return config
}
}
const withCSS = require('@zeit/next-css')
module.exports = withCSS()
这是我的package.js
This is my package.js
{
"name": "create-next-example-app",
"scripts": {
"dev": "nodemon server/index.js",
"build": "next build",
"start": "NODE_ENV=production node server/index.js"
},
"dependencies": {
"@zeit/next-css": "^1.0.1",
"body-parser": "^1.18.3",
"cors": "^2.8.5",
"express": "^4.16.4",
"mongoose": "^5.4.19",
"morgan": "^1.9.1",
"next": "^8.0.3",
"react": "^16.8.4",
"react-dom": "^16.8.4",
"semantic-ui-css": "^2.4.1",
"semantic-ui-react": "^0.86.0"
},
"devDependencies": {
"css-loader": "^2.1.1",
"file-loader": "^3.0.1",
"node-sass": "^4.11.0",
"nodemon": "^1.18.10",
"sass-loader": "^7.1.0",
"url-loader": "^1.1.2"
}
}
我读到某个地方，必须在页面目录中包含_document.js.
I read somewhere you have to include a _document.js in the pages directory.
// _document is only rendered on the server side and not on the client side
// Event handlers like onClick can't be added to this file
// ./pages/_document.js
import Document, { Html, Head, Main, NextScript } from 'next/document';
class MyDocument extends Document {
static async getInitialProps(ctx) {
const initialProps = await Document.getInitialProps(ctx);
return { ...initialProps };
}
render() {
return (
<Html>
<Head>
<link rel='stylesheet'
href='//cdn.jsdelivr.net/npm/semantic-ui@2.4.2/dist/semantic.min.css'
/>
</Head>
<body className="custom_class">
<Main />
<NextScript />
</body>
</Html>
);
}
}
export default MyDocument;
这真的很难吗?
更新
还有另一种方法可以使它起作用.
当启动Next应用程序时，您将获得一个components文件夹，其中包含一个head.js和一个nav.js文件.
There is an alternate way of getting this to work.
When you start up your Next app you get a components folder which includes a head.js and a nav.js file.
head.js文件最终类似于HTML中的<head></head>标记.或者我应该说这就是head.js编译到的内容.无论如何，您只需在此处添加即可:
The head.js file ultimately is analogous to a <head></head> tag in HTML. Or I should say that's what the head.js compiles to. ANYWAY, you can just add this in there:
<link
rel="stylesheet"
href="//cdn.jsdelivr.net/npm/semantic-ui@2.4.2/dist/semantic.min.css"
/>
这将起作用.
但是就像我说的那样，您仍然无法导入模块:
But like I said you still can't import the modules like so:
import 'semantic-ui-css/semantic.min.css'
推荐答案
因此，看来我必须执行以下操作才能使其正常工作:
So it looks like I had to do the following to get this to work:
将我的next.config.js文件更改为:
const withCSS = require('@zeit/next-css')
module.exports = withCSS({
webpack: function (config) {
config.module.rules.push({
test: /\.(eot|woff|woff2|ttf|svg|png|jpg|gif)$/,
use: {
loader: 'url-loader',
options: {
limit: 100000,
name: '[name].[ext]'
}
}
})
return config
}
})
然后执行npm i css-loader file-loader url-loader -D就可以了.
但是我对为什么需要css-loader file-loader感到困惑.我习惯于在Webpack配置中显式地添加加载程序(就像我们在上面添加url-loader一样)...我不必在这里！
However I'm baffled as to why css-loader file-loader are needed? I'm used to webpack configs where you are explicitly adding the loaders (Like we are adding the url-loader above)... I didn't have to here!
这篇关于配置next.config文件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
