webpack中使用less-loader、less

最新推荐文章于 2024-06-17 14:24:04 发布

每一天，每一步

最新推荐文章于 2024-06-17 14:24:04 发布

阅读量1.8k

点赞数

分类专栏： webpack 文章标签： html5 webpack less

本文链接：https://blog.csdn.net/u010234868/article/details/120394115

版权

webpack 专栏收录该内容

20 篇文章 0 订阅

订阅专栏

项目目录：

index.html：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id="app"></div>
    <script src="../dist/build.js"></script>
</body>
</html>

main.less：

@imgPath: './fengjing.jpg';
body {
    background-image: url(@imgPath);
}

main.js：

import './main.less';

安装less-loader、less依赖：

cnpm i less-loader@2.0.0 less@2.1.1 -D

需要已安装 css-loader、style-loader：

cnpm i css-loader@0.28.11 style-loader@0.23.1 -D

webpack.dev.config.js配置：

var path = require('path');

module.exports = {
    entry: {
        "main": "./src/main.js"
        // 注意路径
    },
    output: {
        path: path.resolve('./dist'),
        filename: './build.js'
    },
    module: {
        loaders: [
            {
                test: /\.css$/,
                loader: 'style-loader!css-loader'
            },
            {
                test: /\.(jpg|jpeg|png|gif|svg)$/,
                loader: 'url-loader?limit=200000'
            },
            {
                test: /\.less$/,
                loader: 'style-loader!css-loader!less-loader'
            }
        ]
    },
    watch: true
}

执行：npm run dev，报错：

internal/modules/cjs/loader.js:638
    throw err;
    ^

Error: Cannot find module 'yargs'
    at Function.Module._resolveFilename (internal/modules/cjs/loader.js:636:15)
    at Function.Module._load (internal/modules/cjs/loader.js:562:25)
    at Module.require (internal/modules/cjs/loader.js:692:17)
    at require (internal/modules/cjs/helpers.js:25:18)
    at Object.<anonymous> (E:\vuekaike\06_less_loader\node_modules\_webpack@3.12.0@webpack\bin\webpack.js:16:13)
    at Module._compile (internal/modules/cjs/loader.js:778:30)
    at Object.Module._extensions..js (internal/modules/cjs/loader.js:789:10)
    at Module.load (internal/modules/cjs/loader.js:653:32)
    at tryModuleLoad (internal/modules/cjs/loader.js:593:12)
    at Function.Module._load (internal/modules/cjs/loader.js:585:3)

原因：main.js中导入的文件名书写错误；也可能是新安装的依赖版本与webpack版本不匹配，卸载依赖时，又报错，但是文件目录并没有package-lock.json：

npm WARN old lockfile
npm WARN old lockfile The package-lock.json file was created with an old version of npm,
npm WARN old lockfile so supplemental metadata must be fetched from the registry.
npm WARN old lockfile
npm WARN old lockfile This is a one-time fix-up, please be patient...
npm WARN old lockfile
npm ERR! code EINVALIDPACKAGENAME
npm ERR! Invalid package name "_@types_html-minifier-terser@5.1.2@@types": name cannot start with an underscore; name can only contain URL-friendly characters

npm ERR! A complete log of this run can be found in:
npm ERR!     C:\Users\Administrator\AppData\Local\npm-cache\_logs\2021-09-20T13_16_21_068Z-debug.log

此时，可以删除package.json中的该依赖，删除node_modules文件夹，cnpm i重新安装所有依赖。然后再选择刚刚需要安装的依赖的合适版本进行安装。

改正后再次执行： npm run dev，目录下生成一个dist文件夹及build.js：

将src下的index.html拷贝到dist文件夹下，并在浏览器中打开预览，mian.less文件成功解析：

每一天，每一步

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
webpack中使用less-loader、less

项目目录：index.html：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title></head><b..
复制链接

扫一扫