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语法,并在相应页面中进行引入。