在create-react-app腳手架工具中增加less支援
阿新 • • 發佈：2019-01-09
create-react-app是FaceBook官方出品的一個React.js腳手架工具,集成了webpack等除錯和打包工具,具體可以檢視Github:https://github.com/facebookincubator/create-react-app
其預設支援css的import,但是不支援less,本文介紹如何簡單的增加less的支援。
在create-react-app生成的專案資料夾中,是看不到webpack.config相關的檔案的,而要增加less支援肯定是要更改webpack配置檔案的,所以需要讓這些檔案暴露出來,使用以下命令即可:
npm run eject
之後便可以在專案目錄下看到config資料夾,其中的webpack.config.dev.js和webpack.config.prod.js分別是開發環境和生產環境使用的webpack配置檔案。
安裝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('postcss-loader'),
options: {
ident: 'postcss', // https://webpack.js.org/guides/migrating/#complex-options
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
}
],
},
生產環境的配置也是類似上面的方法修改就可以了。
配置完成後,就可以直接import了:
import './style.less';