Fatal编程技术网
  • reactjs/
  • Reactjs 从Create React App升级到Next.js-CSS样式表不起作用

Reactjs 从Create React App升级到Next.js-CSS样式表不起作用

reactjs next.js

Reactjs 从Create React App升级到Next.js-CSS样式表不起作用,reactjs,create-react-app,next.js,server-side-rendering,Reactjs,Create React App,Next.js,Server Side Rendering,最近我们发现我们的React项目必须使用SSR。 我已经检查了我知道的每一种方法，并且几乎测试了我在媒体和其他网站上找到的所有方法。经过大量的工作，我决定我们必须迁移到下一个JS 虽然迁移所有内容的过程都很好，但是对于样式表来说 在旧版本的应用程序中，我们使用webpack将我们的风格与项目捆绑在一起，一切都很好 这是webpack.config.js const HtmlWebpackPlugin=require（'html-webpack-plugin'）； const ExtractTe

最近我们发现我们的React项目必须使用SSR。 我已经检查了我知道的每一种方法，并且几乎测试了我在媒体和其他网站上找到的所有方法。经过大量的工作，我决定我们必须迁移到下一个JS

虽然迁移所有内容的过程都很好，但是对于样式表来说

在旧版本的应用程序中，我们使用webpack将我们的风格与项目捆绑在一起，一切都很好

这是webpack.config.js

const HtmlWebpackPlugin=require（'html-webpack-plugin'）；
const ExtractTextPlugin=require（“提取文本网页包插件”）；
const port=process.env.port | 3000；
const extractSCSS=new ExtractTextPlugin（'./[name].css'）；
//const UglifyJS=require（'UglifyJS-webpack-plugin'）；
module.exports={
模式:"发展",，
输出：{
文件名：“bundle.[hash].js”，
公共路径：'/'
},
devtool:'源映射'，
模块：{
规则：[
//第一条规则
{
测试：/\（js）$/，
排除：/node_模块/，
用法：['babel-loader']，
},
//第二条规则
{
测试：/\.scss$/,，
用法：['css-hot-loader'].concat（extractSCSS.extract({
回退：“样式加载器”，
使用：[
{
加载器：“css加载器？源地图”，
选项：{alias:{'../img':'../public/img'}，sourceMap:true}
},
{
加载器：“sass加载器”，
选项：{
sourceMap:true
}
}
]
}))
},
{
测试：/\.css$/,，
用法：['style-loader'，'css-loader']
},
{
测试：/\（png | svg | jpg | gif）$/，
使用：[
“文件加载器”
]
},
{
测试：/\（woff | woff2 | eot | ttf | otf）$/，
使用：[
“文件加载器”
]
}
]
},
插件：[
新HtmlWebpackPlugin({
模板：“public/index.html”，
favicon:“public/favicon.ico”
}),
提取SCSS，
],
开发服务器：{
主机：“localhost”，
港口:港口,，
历史上的倒退：是的，
开放：是的
}

};这不是一个真正的答案，但Next.js中的CSS太差劲了！我发现自己一直在努力工作，所以我决定遵循他们的文档并简单地使用：


const App = () => {
  return (
    {style}
    <div/>
  );
}

let style = (<style jsx>
{`
.someClass {}
`}
</style> )

export default App;



const-App=（）=>{
返回(
{style}
);
}
让样式=(
{`
.someClass{}
`}
)
导出默认应用程序；


通过这种方式，您可以像在常规HTML中一样使用CSS，而无需任何外部导入


您不需要同时使用CSS和ASS插件

如果您使用的是Sass，那么WithPass插件将把它编译成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>



从“下一个/Head”导入Head；

仅使用节点模块中的CSS，您不需要这种奇特的配置

3个简单步骤：


  • 安装下一个css插件：
    • 

  • 在根目录next.config.js中创建以下内容：
    • 

  • 现在，您应该能够像下面这样从node_模块导入样式表：
    • 
注意：使用nextv8+
    
背景：
我花了几个小时试图简单地导入一个作为node_模块安装的CSS，各种解决方案大多是黑客的解决方法，但如上所示，有一个简单的解决方案。

    它是由一名核心团队成员提供的：
    请查看文档的使用部分，我想我需要这两个文档，因为我们对我们实现的样式使用SCS，对需要自己css样式的库使用css。当我从next.config.js中删除withCSS时，会在重建后返回。/node_modules/mobile/dist/mobile.css Module解析失败：意外的标记（3:0）您可能需要适当的加载程序来处理此文件类型。您可以将库的CSS复制/粘贴到新的SCSS文件（例如：_-ployate.SCSS）中，并将其与任何其他.SCSS文件一样导入。SCSS只是“超级”CSS。不幸的是，我们无法将我们的经典类名用法转换为样式化Jsx。我认为要将所有组件样式都改成这种样式太难了，我们的html设计师会杀了我；-）@我听到了。我也有一个项目，它是不可能转换其css那样。。我希望我知道更好的方法。你可能会在他们的回购问题上得到更好的答案。我想试试

    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';