关于css-modules:css-modules的导入方式差异

物料

/* style.css、style.less、style.module.less 中的内容均如下所示 */
body {background: yellow;}

:global {
    body {background: red;}
}

.title {color: red;}

导入.css 后缀文件

import './style.css'
body款式失效，:global款式不失效

import style from './style.css'
body款式失效，:global款式不失效，style为空对象

导入.less 后缀文件

import './style.less'
body款式失效，:global款式不失效

import style from './style.less'
body款式失效，:global款式不失效，style为undefined

导入.module.less 后缀文件

import './style.module.less'
body款式失效，:global款式失效

import style from './index.module.less'
body款式失效，:global款式失效，style为空对象

留神

:global是 css modules 的语法，而不是 less 的语法，所以如果没有开启 css modules，那:global 不失效是失常景象