配置React项目及 LESS 或 SASS 的引入

0、安装 node.js

1、创建一个react-app 建议采用官网方式：https://reactjs.org/docs/crea...

npx create-react-app my-app
cd my-app
npm start

2、暴露webpack

npm run eject

3、下载 LESS 或者 SASS （采用下面一种方式即可）

npm install less-loader less --save-dev               // 下载LESS
npm install sass-loader node-sass --save-dev          // 下载SASS

4、配置config文件下的 webpack.config.dev.js 及 webpack.config.prod.js ,两格文件修改的是一样的地方，故只展示一个文件图一是配置LESS的，只修改红色框框处

// 修改前
    test: /\.css$/,
// 修改后代码
    test: /\.css|less$/,

// 在该处新添加
{
    loader: require.resolve('less-loader')
},

配置React项目及 LESS 或 SASS 的引入

图二是配置SASS的，只修改红色框框处,修改方式与LESS相同

// 修改前
    test: /\.css$/,
// 修改后代码
    test: /\.css|scss$/,

// 在该处新添加
{
    loader: require.resolve('sass-loader')
},

配置React项目及 LESS 或 SASS 的引入

5、最后添加.less文件或 .scss文件就可以运行了。

配置React项目 及 LESS 或 SASS 的引入