create-react-app中添加less支持
首先先在项目中添加less-loader和less的支持，执行如下命令：
yarn add less less-loader
1、
create-react-app创建的项目中默认不包含webpack的配置文件，而使用less要修改webpack的文件。 使用命令
yarn eject 让项目曝出webpack配置文件，执行
yarn eject 后 项目多出来的文件中包含webpack.config.dev.js和 webpack.config.prod.js（config文件夹下），在其中添加对less的支持。通常这两个必须文件同步修改，保持一致。（即在webpack.config.dev.js中修改了或添加了什么，同样的要在webpack.config.prod.js里面进行修改和添加）。
2、在webpack.config.dev.js中，复制一份css的出来
{
test: /\.css$/,
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',
}),
],
},
},
],
},
并将css改为less，并在最后添加less-loder模块用来解析less。完整添加的代码如下
{
test: /\.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')
}
],
},
修改了webpack.config.dev.js，同样的要在webpack.config.prod.js中做同样的修改。
这样，在项目中就可以直接写less语法，并在相应页面中进行引入。