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

发布时间:2019-06-04 发布网站:脚本宝典
脚本宝典收集整理的这篇文章主要介绍了配置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 的引入全部内容,希望文章能够帮你解决配置React项目 及 LESS 或 SASS 的引入所遇到的问题。

如果觉得脚本宝典网站内容还不错,欢迎将脚本宝典推荐好友。

本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。