当前位置: 首页 > 工具软件 > library-app > 使用案例 >

create-react-app 引入less与sass

邹祺然
2023-12-01

引入less

1.安装react-app-rewired,react-app-rewire-less,babel-plugin-import

命令行:
- npm install react-app-rewired –only=dev
- npm install react-app-rewire-less –only=dev
- npm install babel-plugin-import –only=dev

2.根目录下创建config-overrides.js

const { injectBabelPlugin } = require('react-app-rewired');
const rewireLess = require('react-app-rewire-less');

module.exports = function override(config, env) {
  config = injectBabelPlugin(['import', { libraryName: 'antd', style: true }], config);
  config = rewireLess.withLoaderOptions({
    modifyVars: { "@primary-color": "#9F35FF" },
  })(config, env);
  return config;
};

PS:这里引用antd 组件,并且设置了主题样式颜色编码为#9F35FF

引入sass

1.安装node-sass-chokidar,npm-run-all

命令行:
- npm install –save node-sass-chokidar
- npm install –save npm-run-all

2.修改package.json

"scripts": {
     "build-css": "node-sass-chokidar src/ -o src/",
     "watch-css": "npm run build-css && node-sass-chokidar src/ -o src/ --watch --recursive",
     "start-js": "react-scripts start",
     "start": "npm-run-all -p watch-css start-js",
     "build-js": "react-scripts build",
     "build": "npm-run-all build-css build-js",
     "test": "react-scripts test --env=jsdom",
     "eject": "react-scripts eject"
}
 类似资料: