怎样在项目中让react中支持.less

163 阅读1分钟

让react支持less型文件夹:

1.第一步:在开发环境中安装react-app-rewiredcustomize-cra less less-loader;

2.第二步,安装然后在根目录下创建一个名为config-overrides.js的文件夹,配置信息如下:

const path = require('path')
const { override, addWebpackAlias } = require('customize-cra')
const addLessLoader = require('customize-cra-less-loader')

module.exports = override(
 addWebpackAlias({
   '@': path.resolve(__dirname, 'src'),//起别名,引入文件时用@符号代替../../这样的层级符号
 }),
 addLessLoader({
   lessLoaderOptions: {
     lessOptions: {
       javascriptEnabled: true,
     },
   },
 }),
)

然后在package.json中讲script的内容改为:

  "scripts": {
    "start": "react-app-rewired start",
    "build": "react-app-rewired build",
    "test": "react-app-rewired test",
    "eject": "react-scripts eject"
  },

3.如果要在项目中引入antd,好像还要在开发环境中安装babel-plugin-import 然后在config-overrides.js中添加 代码儿


const{override,fixBabelImports}=require('customize-cra')
module.exports = override( fixBabelImports('import', 
{ libraryName: 'antd',
libraryDirectory: 'es', 
style: 'css'
//如果写成true,代表运用less
}) );