如何在ant-design-pro框架中使用CSS样式

2019-06-18  本文已影响0人  吃瓜群众666

ant-design-pro这个框架默认是使用less样式的,要让其支持css样式的话,只需在config文件中cssLoaderOptions的选项里面加上context.resourcePath.includes('.css') 即可。
示例:

 cssLoaderOptions: {
    modules: true,
    getLocalIdent: (context, localIdentName, localName) => {
      if (
        context.resourcePath.includes('node_modules') ||
        context.resourcePath.includes('.css') || //解决CSS文件加载失败的问题
        context.resourcePath.includes('ant.design.pro.less') ||
        context.resourcePath.includes('global.less')
      ) {
        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;
    },
  },
上一篇 下一篇

猜你喜欢

热点阅读