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

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>