react Dva引入sass(scss)

文章参考

1. dva 麻烦的sass 引入步骤
2. 在React中使用CSS Modules设置样式

LESS

roadhog原本就把less包进去,所以可以很自然地使用。原理其实就是扫描node-modules 的时候会包进去：
​

SASS 引入

1. 不需要修改本地任何档案的配置
2. 不需要新增任何指令
   所以只要一行就可以解决：

npm install node-sass sass-loader --save

3. 安装完后，只要把sass文件改成.scss

import './index.scss'
import styles from './IndexPage.scss'

案例，SCSS嵌套引入

react组件代码

import BaseComponent from '../core/BaseComponent.js';
import mystyle from './my.scss';
class MyIndex extends BaseComponent {
	render () {
        return (
            <div className={`${mystyle.huangbiao}`}>
                <input type="text" onChange={this.handleChange.bind(this)} value={this.state.type} />
                <Button onClick={(e)=>this.testEvent("params",e)}>绑定事件测试</Button>
                <div className={`${mystyle.liumei}`}>huangbiao
                    <div className={``}>liumei</div>
                </div>
            </div>
        );
	}
}
export default MyIndex;

scss代码

.huangbiao{
    color: greenyellow;
    .liumei{
        font-size: 45px;
    }
}

[外链图片转存失败(img-Y9aAQ2VG-1563120553616)(…/assert/react引入scss嵌套样式.png)]

默认引入了CSS Modules

上述的案例，是已经使用了CSS Modules了的