react引入scss

文章参考

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

LESS

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

SASS 引入

  1. 不需要修改本地任何档案的配置
  2. 不需要新增任何指令
    所以只要一行就可以解决:
npm install node-sass sass-loader --save
  1. 安装完后,只要把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;
    }
}

默认引入了CSS Modules

上述的案例,是已经使用了CSS Modules了的
阅读更多
换一批

没有更多推荐了,返回首页