webpack--使用scss和less

使用scss

1 安装依赖

"node-sass": "^4.13.1",
"sass-loader": "^6.0.6",

2 配置

{
        test: /\.scss$/,
        use:['style-loader',"css-loader","sass-loader"]
      },

3 main.scss

.ot{font-size: 100px;}

4 引入main.scss文件

import React from 'react';
import ReactDOM from 'react-dom';

import S from './main.scss'

ReactDOM.render(
  <div className="ot">React</div>,
  document.getElementById("root")
);

5 测试

---

使用less

1 安装依赖

"less-loader": "^4.0.5",
"less":"^3.0.0-alpah.3"

2 配置

{
        test: /\.less$/,
        use:['style-loader',"css-loader","less-loader"]
      },

3 main.less

.ot{background-color: red}

4 引入main.scss文件

import React from 'react';
import ReactDOM from 'react-dom';

import S from './main.less'

ReactDOM.render(
  <div className="ot">React</div>,
  document.getElementById("root")
);

5 测试

---

模块化的时候只需要配置css-loader就可以了，请参考：https://blog.csdn.net/qq_28497823/article/details/105271188