umi踩坑：umi中使用sass 样式

在umi中可以直接使用css，但是并不支持scss，我们需要加两个loader，
直接npm安装 node-sass和sass-loader 即可，剩余的事情umi已经帮我们做好了。

npm i --save-dev node-sass sass-loader

npm install --save @umijs/plugin-sass

结果：

图片.png

两种在页面中引用样式的用法：

第一种使用scss方法

import style from './xxx.scss';

 <div className={style.xxx样式名}>

// 使用这种方法的时候样式名称不能用 "-" ，不然在使用的时候会报错

eg:

import homeStyle from './home.scss';
  render() {
        return (
            <div className={homeStyle.home_container}>
                <p className={homeStyle.red}>Home 页面</p>
            </div>
        );
    }

第二种使用scss方法

import   './xxx.scss';

 <div className="xxx样式名">

样式应用umi的默认配置，需修改：
在.umirc.js文件中添加配置：

  cssLoaderOptions:{
    localIdentName:'[local]'
  }

图片.png

eg：

import './home.scss'; 
render() { 
return ( 
<div className="home_container">
   <p className="red">Home 页面</p> 
</div> 
);
 }