配置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')
},

clipboard.png

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

// 修改前
    test: /\.css$/,
// 修改后代码
    test: /\.css|scss$/,
    
// 在该处新添加
{
    loader: require.resolve('sass-loader')
},

clipboard.png

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

阅读 6.5k

不断成长的码农
相互交流交流
214 声望
7 粉丝
0 条评论
你知道吗?

214 声望
7 粉丝
文章目录
宣传栏