没有webpack.config.js如何配置less吗 安装配置less必看

首先我们最新创建的项目;无论是vue或者react项目,你都找不到webpack.config.js,甚至没有原来的build文件夹,那我们如何配置less或者jq这种插件呢?接下来进入正题

配置less

1.安装less less-loader

 打开我们的项目目录,打开CMD终端,安装命令如下

yarn add less less-loader

或者

npm install less less-loader

2.git commit一下

git add .

git commit -m 'xx'

3. yarn eject生成config目录及你想要的webpack.config.js

在CMD终端 命令行输入:

yarn eject

或者 

npm run eject

成功的话会出现config文件夹 

4.打开config/webpack.config.js 修改三处

第一处:

const lessRegex = /\.less$/;
const lessModuleRegex = /\.module\.less$/;

添加位置如下图 

---------------------------------------------------------------------

第二处:

 {
    loader: require.resolve('less-loader'),
    options: lessOptions,
 },

添加位置如下图

-----------------------------------------------------------------------  

第三处:

{
              test: lessRegex,
              exclude: cssModuleRegex,
              use: getStyleLoaders({
                importLoaders: 1,
                sourceMap: isEnvProduction && shouldUseSourceMap,
              }),
              sideEffects: true,
            },
            {
              test: lessModuleRegex,
              use: getStyleLoaders({
                importLoaders: 1,
                sourceMap: isEnvProduction && shouldUseSourceMap,
                modules: true,
                getLocalIdent: getCSSModuleLocalIdent,
              }),
            },

添加位置如下图 

接下来重启项目 成功! 

评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值