umi 样式隔离

前言

在使用umi日常开发项目，有时候样式之间会有污染，需要在class增加一个className来区分

具体内容

const PrefixWrap = require("postcss-prefixwrap");

const rootId = 'xxx'

export default {
...
cssLoaderOptions: {
    modules: true,
    getLocalIdent: (context, localIdentName, localName) => {
      if (
        context.resourcePath.includes('node_modules') ||
        context.resourcePath.includes('ant.design.pro.less') ||
        context.resourcePath.includes('global.less')
      ) {
        return localName;
      }
      else if (localName === rootId) {
        return localName
      }
      const match = context.resourcePath.match(/src(.*)/);
      if (match && match[1]) {
        const antdProPath = match[1].replace('.less', '');
        const arr = slash(antdProPath)
          .split('/')
          .map(a => a.replace(/([A-Z])/g, '-$1'))
          .map(a => a.toLowerCase());
        return `antd-pro${arr.join('-')}-${localName}`.replace(/--/g, '-');
      }
      return localName;
    },
  },
extraPostCSSPlugins: [PrefixWrap(`#${rootId}`, {
    ignoredSelectors: ["html", "body", `#${rootId}`],
  })],
...
}

　　

这样一来，样式之间就隔离开了