a、引入less后报错(网上有种说法用npm安装antd导致,删掉 node_modules/ 和 yarn.lock ,并且使用 yarn 重新安装依赖,没试过):
.bezierEasingMixin();
^
Inline JavaScript is not enabled. Is it set in your options?
解决办法:降低less版本,安装大于2.7.3小于3.0.0的版本
npm install -D less@2.7.3
b、less模块化不起作用,可能是css-modules没配置好。以下是webpack的正确配置
c、github上less配置的方式
{
test: /\.css$/,
use: ['style-loader', 'css-loader']
},
{
test: /\.less$/,
use: [{
loader: 'style-loader' // creates style nodes from JS strings
}, {
loader: 'css-loader', // translates CSS into CommonJS
options: {
sourceMap: true,
modules: true//css模块化解决方案,利用js来管理样式依赖(css Modules)
}
}, {
loader: 'less-loader', // compiles Less to CSS
options: {
sourceMap: true,
strictMath: true,
noIeCompat: true,
javascriptEnabled:true,
paths: [
path.resolve(__dirname, 'node_modules')
]
}
}]
},
应用方法:
//less文件
@nice-blue: #5B83AD;
@light-blue: @nice-blue + #111;
.header {
color: @light-blue;
font-size: 52px;
}
//组件
import React from 'react';
import style from './Case.less';
class Case extends React.Component {
constructor(props) {
super(props);
this.state = {
value: null,
};
}
render() {
return <div className={style.header}>
头部文件内容
</div>
}
}
export default Case;
网友评论