美文网首页
如何在ant-design-pro框架中使用CSS样式

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

作者: 吃瓜群众666 | 来源:发表于2019-06-18 12:23 被阅读0次

    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;
        },
      },
    

    相关文章

      网友评论

          本文标题:如何在ant-design-pro框架中使用CSS样式

          本文链接:https://www.haomeiwen.com/subject/krtfqctx.html