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

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

1223

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国际化

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

回复