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]'
}
...