您的位置:首页 > Web前端 > React

create-react-app项目添加less配置

2018-03-14 22:37 1021 查看
使用
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>
);
}
}
...


.
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签: