create-react-app中新增less支援
阿新 • • 發佈:2018-12-30
前言
使用 create-react-app 腳手架建立專案後,預設是不支援 less 的。所以我們需要手動新增。
第一步 暴露webpack配置檔案
使用 create-react-app 建立的專案,預設情況下是看不到 webpack 相關的配置檔案,我們需要給它暴露出來,使用下面命令即可:
npm run eject
執行之後,我們發現多了一個config資料夾
這樣就可以修改 webpack 相關配置了。
第二步 新增less
在專案根目錄 使用 npm 或者 yarn 來安裝 less 和 less-loader,我這裡使用的是 yarn
yarn add less less-loader
第三步 修改webpack配置檔案
我們需求修改 webpack.config.dev.js 和 webpack.config-prod.js 這兩個配置檔案
- test: /.css$/ 改為 /.(css|less)$/
- test: /.css$/ 的 use 陣列配置增加 less-loader
{ test: /\.(css|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') // compiles Less to CSS } ], },
結束
重新執行專案,引入less,發現是不是可以使用了。