webpack手动配置React开发环境的步骤(2)

// webpack.config.js module.exports = { ... module: { rules: [{ test: /\.scss$/, use: [ "style-loader", // creates style nodes from JS strings "css-loader", // translates CSS into CommonJS "sass-loader" // compiles Sass to CSS ] }] } };

在src内新增index.scss

$designWidth: 750; @function px2rem($px) { @return $px*10/$designWidth + rem; } #root { div { font-size: px2rem(500); display: flex; color: #64B587; input { flex: 1 1 auto; } span { flex: 1 1 auto; text-align: center; } } }

在index.js中新增import index.scss

最终效果: