Question

我仍然是nextjs的新手，所以我不知道这是一个错误还是我错误地实现了它。

我成功地使用本指南设法提取了所有scss文件： https://github.com/zeit/next-plugins/tree/master/packages/next-sass

使用服务器端渲染时，一切正常。外部css文件得到适当的更新和应用，但是一旦我进行客户端页面转换，新的scss导入就不会被注入外部css文件中。我也不想在初始页面加载上预取每个scss文件，它应该动态地获取和更新服务器端路由和客户端路由上的外部文件。

我的next.config.js

const getRoutes = require('./routes');
const path = require('path');
const withSass = require('@zeit/next-sass');

module.exports = withSass({
  exportPathMap: getRoutes,
  // useFileSystemPublicRoutes: false,
  cssModules: true,
  cssLoaderOptions: {
    importLoaders: 1,
    localIdentName: "[local]___[hash:base64:5]",
  },
})

示例组件

import { Fragment } from 'react';
import Main from '../components/main';
import style from '../styles/pages/parkett.scss';

const Parkett = () => 
  <Fragment>
    <section className={`section ${style.sec_two_parkett}`}>
      <div className={`sec_text ${style.sec_two_text}`}>
        <h2 className="didonesque_headline">Detailiert</h2>
        <p className="normal_text">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p>
      </div>
    </section>
    <section className={`section ${style.sec_three_parkett}`}>
      <div className={`sec_text ${style.sec_three_text}`}>
        <h2 className="didonesque_headline">Erstaunlich</h2>
        <p className="normal_text">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat.</p>
      </div>
    </section>
  </Fragment> 

export default () => 
  <Main 
    title="parkett" 
    component={<Parkett />} 
    links={['Treppe', 'Moebel', 'Innenausbau']}
    />

Answer 1

您好我建议使用styled-jsx-css-loader将css加载到jsx中，它可以正常工作，sass loader将sass转换为css，您可以在next.config.js文件中将它们链接起来： config.module.rules.push({ test: /\.scss$/, use: [ { loader: 'emit-file-loader', options: { name: 'dist/[path][name].[ext].js', }, }, { loader: 'babel-loader', options: { babelrc: false, extends: path.resolve(__dirname, './.babelrc'), }, }, 'styled-jsx-css-loader', // optional if you wanna purify css if you are using bootstrap or a huge css lib // { // loader: 'css-purify-webpack-loader', // options: { // includes: [ // './pages/*.js', // './components/**/*.js', // './containers/**/*.js', // ], // }, // }, { loader: 'sass-loader', options: { sourceMap: dev, }, }, ], });

然后像这样导入sass：

import commonStyle from '../styles/common/index.scss'; <style jsx global> {commonStyle} </style>

Answer 2

在我的_app.js顶部添加以下内容为我解决了该问题：

// This is a bit of a hack to ensure styles reload on client side route changes.
// See: https://github.com/zeit/next-plugins/issues/282#issuecomment-480740246
if (process.env.NODE_ENV !== 'production') {
  Router.events.on('routeChangeComplete', () => {
    const path = '/_next/static/css/styles.chunk.css'
    const chunksSelector = `link[href*="${path}"]`
    const chunksNodes = document.querySelectorAll(chunksSelector)
    const timestamp = new Date().valueOf()
    chunksNodes[0].href = `${path}?${timestamp}`
  })
}

有关某些背景知识，请参阅next-plugin存储库中的以下问题：

Nextjs外部css没有在客户端页面转换上更新

2 个答案: