nextjs 配置

next.js 9.3.1, @zeit/next-sass 1.0.1

next-sass & postcss 配置问题

解决 postcss 不生效的情况，会出现 warning，但是不管

postcss.config

module.exports = {
  parser: ‘postcss-scss‘,
  "plugins": [
    require.resolve(‘postcss-flexbugs-fixes‘),
    [
      require.resolve(‘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,
        },
      },
    ],
  ]
}

next.config.js

{
    ...,
    postcssLoaderOptions: {
        // 这里不能加 parser 
    }
}

使用 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]‘,
      },
}

原文：https://www.cnblogs.com/ende93/p/12595462.html