next.js下css-module和組件的import樣式共存的配置方法

Next.js是一個輕量級的 React 服務端渲染應用框架。還是頭一回用這種服務端渲染的框架，之所以會做服務端渲染，是因爲這個項目是一個純展示性的品牌官網，所以需要爲SEO考慮，由於SPA對搜索引擎並不友好，所以選擇了Next.js來進行服務端多頁渲染。使用了之後發現，其實從編碼的思維來看，其實還是組件式的單頁思想。

這裏想拿出來說說的是在這個項目中，我們開啓了css-module，但在後來的開發過程中需要引入其他組件，卻發現樣式無法加載出來，這裏簡單記錄一下在解決這個問題的一個過程。

這裏我們以Tab組件爲例，我們使用的是rc-tabs，除了需要引入Tab組件之外，還需要引入其對應的樣式，

引入css文件：

 

import 'rc-tabs/dist/rc-tabs.css';

這時發現引入的樣式並沒有生效，這是由於開啓了css-module，webpack會爲編譯之後的class類名加上哈希值，也就意味着，組件對應樣式的class類名發生了變化，但是組件DOM對應的class名並不會變化，這就是樣式無法正常使用的原因。所以解決方案是，在過css-module編譯時應該忽略組件自帶的樣式。找到了問題所在，解決之。

修改配置文件，next.config.js的配置如下：

 

const withCss = require('@zeit/next-css');
const withLess = require('@zeit/next-less');
const path = require('path');
const cssLoaderGetLocalIdent = require('css-loader/lib/getLocalIdent.js');

module.exports = withLess(
  withCss({
    exportPathMap() {
      return {
        '/': { page: '/' },
        '/about': { page: '/about' },
        '/article': { page: '/article' },
        '/articleList': { page: '/articleList' },
        '/business': { page: '/business' },
        '/course': { page: '/course' },
      };
    },
    cssModules: true,
    cssLoaderOptions: {
      localIdentName: '[local]___[hash:base64:5]',
      getLocalIdent: (context, localIdentName, localName, options) => {
        const hz = context.resourcePath.replace(context.rootContext, '');
        console.log(hz);
        if (/node_modules/.test(hz)) {
          return localName;
        }
        return cssLoaderGetLocalIdent(context, localIdentName, localName, options);
      },
    },
    distDir: './.next',
    webpack: (config, options) => {
      // Fixes npm packages that depend on `fs` module
      config.node = {
        fs: 'empty',
      };
      config.resolve.alias['@'] = path.join(__dirname);
      return config;
    },
  }),
);

主要看這裏：其實就是對CSSLoader配置了一下，在getLocalIdent中忽略了對node_modules下的樣式的module化處理~