umi中使用scss

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

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

 

在src/assets下新建文件夹

- assets
 +  - img
 +  - css
  +   -style.scss  // 这个样式文件一般来说存放全局的样式

　　

在src/pages/index.js 引用style.scss

import '../assets/css/style.scss';

　　

在home.js同级新建home.scss 文件

.home-container{
    .red{
        color:red;
    }
}

 

在home.js引用，并修改render

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

...
import homeStyle from './home.scss';
...

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

　　

 // 第二种使用scss方法

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

　　

用第二种方法的情况：

刷新页面发现并没有变化，打开浏览器调试窗口，查看sources

找到引用的css文件，搜索可以看到好像我们的样式确实是存在的，只不过被加上了其他的后缀(为了保证不会出现全局污染)

ps:这个问题当时我找了好久

 

1.png

这个是umi自己默认加上，我们并不想要这个东西，在.umirc.js文件中添加配置

 

...
cssLoaderOptions:{
  localIdentName:'[local]'
}
...