create-react-app项目添加less配置
2023-09-11 14:15:30 时间
使用create-react-app
创建的项目默认不支持less
,以下增加less
配置的步骤
暴露配置文件
create-react-app
生成的项目文,看不到webpack相关的配置文件,需要先暴露出来,使用如下命令即可:
npm run eject
安装less-loader
和 less
npm install less-loader less --save-dev
修改webpack
配置
修改 webpack.config.dev.js
和 webpack.config.prod.js
配置文件
改动1:
/\.css$/
改为 /\.(css|less)$/,
修改后如下:
exclude: [ /\.html$/, /\.(js|jsx)$/, /\.(css|less)$/, /\.json$/, /\.bmp$/, /\.gif$/, /\.jpe?g$/, /\.png$/, ],
改动2:
test: /\.css$/ 改为 /\.(css|less)$/ test: /\.css$/ 的 use 数组配置增加 less-loader
修改后如下:
{ test: /\.(css|less)$/, use: [ require.resolve('style-loader'), { loader: require.resolve('css-loader'), options: { importLoaders: 1, }, }, { loader: require.resolve('postcss-loader'), options: { // Necessary for external CSS imports to work // https://github.com/facebookincubator/create-react-app/issues/2677 ident: 'postcss', plugins: () => [ require('postcss-flexbugs-fixes'), autoprefixer({ browsers: [ '>1%', 'last 4 versions', 'Firefox ESR', 'not ie < 9', // React doesn't support IE8 anyway ], flexbox: 'no-2009', }), ], }, }, { loader: require.resolve('less-loader') // compiles Less to CSS } ], },
注:页面调用
less
.wrapper { display: inline-block; position: relative; } .options { margin: 0; padding: 0; list-style: none; top: 110%; left: 0; right: 0; position: absolute; box-shadow: 1px 1px 10px 0 rgba(0, 0, 0, .6); > li { padding: 3px 6px; &.active { background-color: #0094ff; color: white; } } }
js
... // 引入样式 import '../styles/auto-complete.less'; class AutoComplete extends React.Component { // 构造器 constructor(props) { super(props); // 定义初始化状态 this.state = { displayValue: '', activeItemIndex: -1 }; } // 渲染 render() { const {displayValue, activeItemIndex} = this.state; // 组件传值 const {value, options} = this.props; return ( <div className="wrapper"> <input value={displayValue || value}/> {options.length > 0 && ( <ul className="options"> { options.map((item, index) => { return ( <li key={index} className={activeItemIndex === index ? 'active' : ''}> {item.text || item} </li> ); }) } </ul> )} </div> ); } } ...
.
相关文章
- Windows Store App 网络通信 HttpWebRequest
- App.config和Web.config配置文件的配置节点的解析
- App.config和Web.config配置文件的自定义配置节点
- [Kotlin Spring boot] A simple demo app
- uni-app:nvue:居左/居右/居中对齐(hbuilderx 3.7.3)
- uni-app:引入全局样式文件(hbuilderx 3.6.18)
- uni-app:配置底部tabbar的例子(hbuilderx 3.6.18)
- cordova cordova-plugin-dialogs插件的navigator.notification.confirm方法和alert的方法同时调用,在iOS上app会死掉
- Android的Kotlin的布局文件里面的app:srcCompat提示:红色波浪线
- Error:Execution failed for task ‘:app:packageRelease‘. > com.android.ide.common.signing.KeytoolExcep
- Android 11.0 MTK默认授予app的使用wifi和流量的权限
- android q(10.0)app应用安装白名单
- 〖Python APP 自动化测试实战篇①〗 - 大话闲扯 APP 自动化
- 〖Python APP 自动化测试实战篇⑨〗- 实战 - App自动化实战操作
- uni-app h5配置打包,图片路径访问不到
- 【1】按照Django官网,编写一个web app 创建project/配置数据库
- 如何使用APP兼容性测试?
- Progressive Web App是一个利用现代浏览器的能力来达到类似APP的用户体验的技术——不就是chrome OS吗?
- Django学习(1)——python manage.py startapp app-name新建app报错问题