Login
芋圆社区 > 编程 > UmiJS > Umi2.0直接引用样式文件问题

Umi2.0直接引用样式文件问题

1188
0
2022-04-19
2023-07-27
Hey、小怪兽

  • • umi版本:2.7.7
  • • 刚用umi框架的时候,我像以前一样写了一个demo引入less的文件
  • import React from 'react';
    import './summary.less';
    
    export default function(props) {
      return <div className='summary-content'>123</div>;
    }
  • .summary-content {
      padding: 24px;
      color: red;
    }
  • • 按理来说这个123应该变成红色的才对,但是并没有
  • • 检查了样式并没有写错后,发现这个less文件都没有引入进来
  • • 这里换了CSS模块化的写法却成功了
  • import React from 'react';
    import styles from './summary.less';
    
    export default function(props) {
      return <div className={styles['summary-content']}>123</div>;
    }
  • • 原因是umi框架配置了CSS Module
  • • 但是为了防止全局样式污染,就不允许直接引入css和less文件了,如果要引入的话要在umirc.js配置:
  • export default {
      treeShaking: true,
    
      routes: [
        // 其他配置
      ],
    
      plugins: [
        [
          'umi-plugin-react',
          {
            antd: true,
            dva: false,
            dynamicImport: false,
            title: '测试',
    
            dll: false,
            routes: {
              exclude: [/components\//],
            },
          },
        ],
      ],
      // 添加下面这三行就可以了
      cssLoaderOptions: {
        localIdentName: '[local]',
      },
    };
  • • cssLoaderOptions后来改名为cssLoader了,所以这样写也没错
  • cssLoader: {
      localIdentName: '[local]',
    },
  • • localIdentName是webpack里cssLoader的一个配置
  • • 我看Umi3.5版本好像可以直接引入了
  • • CSS Module多类名写法(修改:2023-07-27):
  • {/* 字符串拼接 */}
    <div className={styles['color-red'] + ' ' + styles['font-blod']}>123</div>
    {/* 数组合并 */}
    <div className={[styles['color-red'], styles['font-blod']].join(' ')}>123</div>

上一篇:Umi2.0快速搭建环境

下一篇:Umi3.5国际化

Message Board
回复
回复内容不允许为空
留言字数要大于2,小于200!
提交成功,5s后刷新页面!
编程导航

Umi2.0快速搭建环境

Umi2.0直接引用样式文件问题

Umi3.5国际化

Umi3.5用Helmet

Copyright © 2020 芋圆社区

Powered by 浙ICP备2020039309号-1

此页面不支持夜间模式!

已进入夜间模式!

已进入普通模式!

搜索框不允许为空

签到成功!经验+5!芋圆币+2!

签到失败!今日已签到!

需要登录社区账号才可以进入!

复制成功
寄,页面未加载完成或页面无锚点