标签:const less 配置 修改 webpack output config options
1.可使用eject暴露出webpack的配置
虽然扩展了 webpack 配置,但是再也享受不到 CRA 升级带来的好处了。因为react-scripts已经是以文件的形式存在于你的项目,而不是以包的形式,所以无法对其升级。
2.可使用react-app-rewired
例子是qiankun的微应用使用less
(1)安装相关的依赖 less相关版本推荐如下,避免一些奇怪问题
npm install react-app-rewired --save-dev npm install customize-cra --save-dev npm install less@3.11.3 less-loader@6.1.0 --save-dev
(2)新建confg-overrides.js
const { name } = require('./package.json'); const { override, addLessLoader, overrideDevServer, watchAll } = require( 'customize-cra'); const { NODE_ENV, REACT_APP_ROUTER_PATH } = process.env; module.exports = { webpack: override( (config) => { config.output.library = `${name}-[name]`; config.output.libraryTarget = 'umd'; config.output.globalObject = 'window'; config.output.publicPath = NODE_ENV === 'production' ? `${REACT_APP_ROUTER_PATH}/` : ''; return config; }, /** 增加代码 **/ addLessLoader({ lessOptions: { javascriptEnabled: true, }, }), /** 增加代码 **/ ), devServer: overrideDevServer( (config) => { config.open = false; config.hot = false; config.headers = { 'Access-Control-Allow-Origin': '*' }; return config; }, watchAll(), ), };
遇到的问题:
PostCSS Loader has been initialized using an options object that does not match the API schema. - options has an unknown property 'plugins'. These properties are valid:
github搜到的解决方案,亲测有效,增加如下配置
adjustStyleLoaders(({ use: [, , postcss] }) => { const postcssOptions = postcss.options; postcss.options = { postcssOptions }; }),
标签:const,less,配置,修改,webpack,output,config,options 来源: https://www.cnblogs.com/yigexiaojiangshi/p/16478228.html
本站声明: 1. iCode9 技术分享网(下文简称本站)提供的所有内容,仅供技术学习、探讨和分享; 2. 关于本站的所有留言、评论、转载及引用,纯属内容发起人的个人观点,与本站观点和立场无关; 3. 关于本站的所有言论和文字,纯属内容发起人的个人观点,与本站观点和立场无关; 4. 本站文章均是网友提供,不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属;如您发现该文章侵犯了您的权益,可联系我们第一时间进行删除; 5. 本站为非盈利性的个人网站,所有内容不会用来进行牟利,也不会利用任何形式的广告来间接获益,纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。