React系列之让create-react-app支持导入less
目前来说,create-react-app并不支持直接导入LESS; 这里我就介绍一下,如何让它支持LESS的导入.
create-react-app是基于webpack的,只是没有暴露webpack.config相关的文件.想要支持less,肯定是要修改webpack的配置文件的. 以下命令可以做到暴露出配置文件来:
npm run eject
运行完毕之后,你会看见多出了一个config文件夹. 里面有webpack.config.dev.js和webpack.config.prod.js等配置文件.
接下来,安装less-loader
npm install less-loader less --save-dev
然后修改webpack.config.dev.js文件,
我们只需要修改两个地方
第一: 找到下面代码
exclude: [
/\.html$/,
/\.(js|jsx)$/,
/\.css$/,
/\.json$/,
/\.bmp$/,
/\.gif$/,
/\.jpe?g$/,
/\.png$/,
]
将.css改为.(css|less),内容变为:
exclude: [
/\.html$/,
/\.(js|jsx)$/,
/\.(css|less)$/,
/\.json$/,
/\.bmp$/,
/\.gif$/,
/\.jpe?g$/,
/\.png$/,
]
第二个:找到test: /.css$/
更改为test: /.(css|less)$/
并在下面的use数组里面增加less-loader
{
loader: require.resolve('less-loader') // compiles Less to CSS
}
更改完以后这部分代码大概长这个样子:
{
test: /\.(css|less)$/,
use: [
require.resolve('style-loader'),
{
loader: require.resolve('css-loader'),
options: {
importLoaders: 1,
},
},
{
loader: require.resolve('less-loader') // compiles Less to CSS
}
...
],
}
生产环境的配置跟上面也差不多.
好了,现在就可以导入less了哟:
import './style.less';
微信公众号
