nextjs 配置

next.js@9.3.1 @zeit/next-sass@1.0.1 postcss@6.0.23 postcss-loader@3.0.0

我本地存在 .postcss.config.js

next-sass & postcss 配置問題

postcss.config

空文件，只是為了讓 next-sass 識別。
具體看這里

next.config.js

{
    ...,
    postcssLoaderOptions: {
        parser: 'postcss-scss',
        plugins: {
          plugins: [
            require('postcss-import')({}),
            require('postcss-url')({}),
            require('postcss-flexbugs-fixes')({}),
            require('postcss-preset-env')({
              autoprefixer: {
                // Disable legacy flexbox support
                flexbox: 'no-2009',
              },
              // Enable CSS features that have shipped to the
              // web platform, i.e. in 2+ browsers unflagged.
              stage: 3,
              features: {
                'custom-properties': false,
              },
            }),
          ],
        },
      },
}

使用 sass modules，但是不使用 css modules

next.config.js

{

     webpack(config, options) {
        config.module.rules.forEach(rule => {
          if (rule && rule.test) {
            // .css 不使用 modules
            const rTest = rule.test.toString();
            if (rTest.includes('.css')) {
              rule.use.forEach((useRule, i) => {
                if (useRule.loader && useRule.loader.includes('css-loader')) {
                  rule.use[i] = {
                    ...useRule,
                    options: {
                      ...useRule.options,
                      modules: false,
                    },
                  };
                }
              });
            }
          }
        });
      },    
      cssModules: true,
      cssLoaderOptions: {
        localIdentName: '[local]___[hash:base64:5]',
      },
}