精华内容
下载资源
问答
  • 2021-06-16 14:14:00

    如果出现报错:
    TypeError: this.getOptions is not a function
    原因: less-loader安装的版本过高
    解决方案: 1.npm uninstall less-loader

    自己的项目用的版本是:
    如果less-loader是5.*.*版本的,这边会报上面的错误

    package.json
      "dependencies": {
        "core-js": "^3.6.5",
        "less": "^3.9.0",
        "less-loader": "^4.1.0",
        "vue": "^2.6.11",
        "vue-router": "^3.2.0",
        "vuex": "^3.4.0"
      },
    

    2.npm install less-loader@6.0.0
    Vue-cli中安装并使用Less
    有关less的使用方法

    更多相关内容
  • less-loader:编译不到CSS

    2021-04-29 16:25:49
    用于webpack的Less loader。 少编译为CSS。 入门 首先,您需要安装less less-loader : $ npm install less less-loader --save-dev 然后将加载程序添加到您的webpack配置中。 例如: webpack.config.js module ...
  • webpack-less-loader

    2016-08-26 00:18:12
    webpack入门和实战(二):全面理解和运用loader和plugins,理解less-loader加载器的使用
  • 主要介绍了关于Webpack中css-loaderless-loader的使用教程,文中通过示例代码介绍的非常详细,相信对大家具有一定的参考价值,需要的朋友们下面来一起看看吧。
  • less-loader, web pack的LESS 加载程序将 LESS 编译为 CSS 加载器将 LESS 编译为 CSS 。Use css加载程序或者原始加载程序将它转换为一个JS模块,并将它的提取为一个单独的文件。安装npm install --save-dev le
  • 安装css-loader,直接在终端输入命令: npm i css-loader -D 在src目录下新建目录css,并在css下新建login.css文件 //login.css的内容 .title { color: red; } 在js目录下新建login.js文件 //导入css文件...

    安装css-loader,直接在终端输入命令:

    npm i css-loader -D

    在src目录下新建目录css,并在css下新建login.css文件 

    //login.css的内容
    .title {
        color: red;
    }

    在js目录下新建login.js文件 

    //导入css文件login.css,如果有多个文件则用感叹号分隔,这是在文件中导入的方式
    import 'css-loader!../css/login.css'
    
    function login() {
        const o = document.createElement('h2')
        o.innerHTML = '刘德华'
        o.className = 'title'
        return o
    }
    
    document.body.appendChild(login())

     以下是第二种方法不需要在login中用到css-loader,但是在配置文件webpack.config.js中需要导入情况如下:

    const path = require('path')
    module.exports = {
        entry: './src/index.js',
        output: {
            filename: 'build.js',
            //output必须设置绝对路径,所以这里导入path模块
            path: path.resolve(__dirname, 'dist')
        },
        module: {
            rules: [
                // {
                //     //test一般就是一个正则表达式,用于匹配我们需要处理的文件类型
                //     test:/\.css$/,
                //     //use
                //     use:[
                //         {
                //             loader:'css-loader'
                //         }
                //     ]
                // },
                {
                    //简写方式
                    test: /\.css$/,
                    use: ['css-loader']
                }
            ]
        }
    }

     安装style-loader,直接在终端输入命令:

    npm i style-loader -D

    在 webpack.config.js文件里加入代码:

    const path = require('path')
    module.exports = {
        entry: './src/index.js',
        output: {
            filename: 'build.js',
            //output必须设置绝对路径,所以这里导入path模块
            path: path.resolve(__dirname, 'dist')
        },
        module: {
            rules: [
                // {
                //     //test一般就是一个正则表达式,用于匹配我们需要处理的文件类型
                //     test:/\.css$/,
                //     //use
                //     use:[
                //         {
                //             loader:'css-loader'
                //         }
                //     ]
                // },
                {
                    //简写方式
                    test: /\.css$/,
                    //先执行style-loader再执行css-loader
                    //顺序规则,从右往左,从下往上
                    use: ['style-loader','css-loader']
                }
            ]
        }
    }

    再运行即可得出附带样式的结果。

    安装less-loader,直接在终端输入命令:

    安装less:

     npm i less -D

     在css目录下新建login.less文件,内容如下:

    @bgColor:'green';
    @fintSize:18px;
    
    .title{
        background-color: @bgColor;
        font-size: @fintSize;
    }

    直接用node命令编译即可在本地生成index.css文件。

    npx less ./src/css/login.less index.css

     我们需要将这个过程交给计算机动态地执行,安装less-loader

    npm i less-loader -D

     在webpack.config.js中添加less-loader,注意添加顺序

    const path = require('path')
    module.exports = {
        entry: './src/index.js',
        output: {
            filename: 'build.js',
            //output必须设置绝对路径,所以这里导入path模块
            path: path.resolve(__dirname, 'dist')
        },
        module: {
            rules: [
                // {
                //     //test一般就是一个正则表达式,用于匹配我们需要处理的文件类型
                //     test:/\.css$/,
                //     //use
                //     use:[
                //         {
                //             loader:'css-loader'
                //         }
                //     ]
                // },
                {
                    //简写方式
                    test: /\.css$/,
                    //先执行style-loader再执行css-loader
                    //顺序规则,从右往左,从下往上
                    use: ['style-loader', 'css-loader']
                },
                {
                    //简写方式
                    test: /\.less$/,
                    //先执行style-loader再执行css-loader
                    //顺序规则,从右往左,从下往上
                    use: ['style-loader', 'css-loader', 'less-loader']
                }
            ]
        }
    }

    直接生成并运行即可:

    展开全文
  • less-loader:预处理器 安装:npm install less-loader -D 配置: package.config.js const path = require('path'); module.exports = { mode: "development", entry: "./src/main.js", output: { path: path....

    继续我们上一篇的webpack学习,现在我们进一步学习 其他的配置
    安装:npm install less-loader url-loader file-loader -D
    配置: package.config.js
    在这里插入图片描述

     const path = require('path');
    
    module.exports = {
     mode: "development",
     entry: "./src/main.js",
     output: {
       path: path.resolve(__dirname, "./build"),
       filename: "bundle.js"
     },
     module: {
       rules: [
         {
           test: /\.css$/,
           // loader:"css-loader" //写法一
           // use: ["css-loader"]//写法二
           // 写法三
           use: [
             { loader: "style-loader" },
             { loader: "css-loader" },
           ]
         },
         {
           test: /\.less$/,
           use: [
             "style-loader",
             "css-loader",
             "less-loader"
           ]
         },
        // {
         //   test: /\.(jpe?g|png|gif|svg)$/,
         //   use: {
         //     loader: "url-loader",
         //     options: {
         //       // outputPath: "img",
         //       name: "img/[name]_[hash:6].[ext]",
         //       limit: 100 * 1024
         //     }
         //   }
         // },
          // {
         //   test: /\.(eot|ttf|woff2?)$/,
         //   use: {
         //     loader: "file-loader",
         //     options: {
         //       // outputPath: "font",
         //       name: "font/[name]_[hash:6].[ext]"
         //     }
         //   }
         // },
         // webpack 5 asset写法
         {
            test: /\.(jpe?g|png|gif|svg)$/,
           type: "asset",
           generator: {
             filename: "img/[name]_[hash:6][ext]"
           },
           parser: {
             dataUrlCondition: {
               maxSize: 100 * 1024
             }
           }
          }
         }
       ]
     }
    }
    
    
    展开全文
  • 前端开源库-less-modify-var-loader修改var加载器更少,webpack加载器更好地替换更少的变量
  • react中的less-loader, css-moduels配置


    配置结果分享

    配置好的文件和测试案例,都已经上传到gitee , 仓库地址:

    https://gitee.com/guozia007/css-modules-lessloader

    或查看这份配置好的文件:

    https://gitee.com/guozia007/imitate-bilibili/blob/master/client/config/webpack.config.js

    如以下配置过程有不明确的地方,可以查看该分享内容。


    准备工作

    默认已经安装了react最新版脚手架

    暴露webpack配置

    react的webpack配置是默认隐藏的,封装在react脚手架包里。

    要想加入自己的配置,需要暴露出webpack文件。

    npm run eject
    

    会显示出默认的配置文件:

    在这里插入图片描述

    里面有个webpack.config.js文件,就是我们要写自己的配置的地方。

    版本说明

    React: ^17.0.2
    
    webpack: 4.44.2
    

    如果版本不同,可能会出现配置方法不一致的情况。

    如果暴露出的webpack文件有两个,分别是webpack.config.dev.jswebpack.config.prod.js,这是老的脚手架版本,你大概需要这么配置css-modules:

    https://blog.csdn.net/tuzi007a/article/details/121617342?spm=1001.2014.3001.5501


    配置less-loader

    安装less和less-loader

    npm install less --save
    
    npm install less-loader@5.0.0 --save
    

    注:

    less-loader不选择版本时,默认安装10.x版本。

    而该版本不支持lessOptions的方法,会出现报错:

    ./src/index.less (./node_modules/css-loader/dist/cjs.js??ref--5-oneOf-8-1!./node_modules/postcss-loader/src??postcss!./node_modules/resolve-url-loader??ref--5-oss) TypeError: this.getOptions is not a function

    所以安装less-loader时,应选择合适的版本。

    本人测试了10.0.0-6.0.0都不支持。 测试了5.0.0版本,是支持的。


    配置方法

    以下内容均在webpack.config.js文件中操作,

    所以以下提到的内容,都去该文件中找到和修改。

    • 1,配置less规则和模块规则

    找到如下语句:

    const cssRegex = /\.css$/;
    const cssModuleRegex = /\.module\.css$/;
    

    复制后放在这个语句后面,

    并把css换成less

    在这里插入图片描述

    即 less语句如下,可直接复制后添加进去:

    const lessRegex = /\.less$/;
    const lessModuleRegex = /\.module\.less$/;
    
    • 2,配置less可选项

    找到如下语句:

     const getStyleLoaders = (cssOptions, preProcessor) => {
        const loaders = [...
    

    cssOptions后添加 lessOptions

    该语句就变成了这样:

     const getStyleLoaders = (cssOptions, lessOptions, preProcessor) => {
        const loaders = [...
    

    同时,紧挨着下面 找到语句:

    {
       loader: require.resolve('css-loader'),
       options: cssOptions,
    },
    

    并把下面这一句,添加到上一句的下面。

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

    结果如下:

    在这里插入图片描述

    • 3,配置扩展方法

    找到这一段代码:

    {
        test: sassRegex,
        exclude: sassModuleRegex,
        use: getStyleLoaders(
        {
            importLoaders: 3,
            sourceMap: isEnvProduction
            ? shouldUseSourceMap
            : isEnvDevelopment,
        },
        'sass-loader'
        ),
        // Don't consider CSS imports dead code even if the
        // containing package claims to have no side effects.
        // Remove this when webpack adds a warning or an error for this.
        // See https://github.com/webpack/webpack/issues/6571
        sideEffects: true,
    },
    // Adds support for CSS Modules, but using SASS
    // using the extension .module.scss or .module.sass
    {
        test: sassModuleRegex,
        use: getStyleLoaders(
        {
            importLoaders: 3,
            sourceMap: isEnvProduction
            ? shouldUseSourceMap
            : isEnvDevelopment,
            modules: {
            getLocalIdent: getCSSModuleLocalIdent,
            },
        },
        'sass-loader'
        ),
    },
    

    复制上面代码, 把sass改成less,然后把修改好的代码添加到该代码下面,

    修改后的代码如下:

    {
        test: lessRegex,
        exclude: lessModuleRegex,
        use: getStyleLoaders(
            {
            importLoaders: 3,
            sourceMap: isEnvProduction
                ? shouldUseSourceMap
                : isEnvDevelopment,
            },
            'less-loader'
        ),
        sideEffects: true,
        },
        {
        test: lessModuleRegex,
        use: getStyleLoaders(
            {
            importLoaders: 3,
            sourceMap: isEnvProduction
                ? shouldUseSourceMap
                : isEnvDevelopment,
            modules: {
                getLocalIdent: getCSSModuleLocalIdent,
            },
            },
            'less-loader'
        ),
    },
    

    到此,less , less-loader配置完成。配置完成后, 需要重启项目。


    案例测试

    写个带有less语法的例子,测验一下,less配置是否可以用。

    /src/index.js

    import React from 'react';
    import ReactDOM from 'react-dom';
    import './index.less';
    
    function App() {
        return (
            <div>
                <h3 className="color1">hello react!</h3>
            </div>
        )
    }
    
    ReactDOM.render(
        <div>
            <App />
        </div>,
        document.querySelector('#root')
    )
    

    /src/index.less

    @def: pink;
    
    .color1 {
        color: @def;
    }
    
    

    重启项目,npm start

    页面内字体颜色显示粉红色,则说明配置正常。

    在这里插入图片描述


    最简单的模块化

    最简单的方法,就是啥配置项都不改动的方法。这是脚手架2.0版默认支持的,不需要任何配置,所以也不需要暴露webpack文件。

    只需要改动css/less文件的文件名,即可实现样式的模块化。

    原因是,react的默认配置里,已经打开了模块化设置,只不过是对文件名有要求, 需要把文件名写作xx.module.css 或者 xx.module.less的形式。


    写个案例测试一下,还用上面写过的例子。然后我们做如下改动:

    • 1,改样式文件名: index.less --> index.module.less
    • 2,改动引入方式:import './index.module.less'; --> import styles from './index.module.less';
    • 3,改动标签内类名写法:<h3 className="color1">hello react!</h3> --> <h3 className={styles.color1}>hello react!</h3>

    此时,重启项目。 npm start

    可以查看到,页面的字体依然为粉红色。

    在这里插入图片描述

    而且,重点是:

    在这里插入图片描述

    打开控制台,可以看到, 这里的类名变了。 变成了 一种文件名_类名__hash值(截取前5位)的格式。

    也就是说, 这时, 已经实现了样式的模块化。

    但是,为了习惯上的样式文件名, 怎么做既能不改动样式文件名, 又能实现样式模块化呢?这时,我们就想到了上面的auto选项的值。


    配置css-loader实现css-modules

    css-modules不是单独的库,也不是插件,而是css-loader中的一个可选项,激活该可选项,即可实现样式的模块化,且无需改动原有的文件名。

    既然需要自己配置,我们就需要自己打开该功能。

    找到这几项代码,css less sass分别有一项,应该是一共有3项这种代码:

    test: --ssRegex,
    exclude: --ssModuleRegex,
    use: getStyleLoaders({
    importLoaders: --,
    sourceMap: isEnvProduction
        ? shouldUseSourceMap
        : isEnvDevelopment,
    }),
    

    把这里都做如下修改:

    test: --ssRegex,
    exclude: --ssModuleRegex,
    use: getStyleLoaders({
    importLoaders: --,
    modules: true, // 都加上这一句代码
    sourceMap: isEnvProduction
        ? shouldUseSourceMap
        : isEnvDevelopment,
    }),
    

    modules: true,意思是打开css-modules功能。不需要把文件命名为.modules.xx的形式了。

    当然,为了类名更符合规则,我们还需要做其他更改,把上面的代码改成如下形式:

    test: cssRegex,
    exclude: cssModuleRegex,
    use: getStyleLoaders({
    importLoaders: 1,
    modules: {
        mode: "local",
        localIdentName: "[path][name]__[local]--[hash:base64:5]",
    },
    sourceMap: isEnvProduction
        ? shouldUseSourceMap
        : isEnvDevelopment,
    }),
    

    localIdentName这里表示编译后的类名规则。

    path: 文件路径

    name: 文件名

    local: 类名

    hash:base64:5 表示 取base64字符串的前五位


    写个案例测试一下吧:

    我们仍然用上述案例,

    只不过这次把文件名中的module去掉,

    index.module.less --> index.less

    修改后,重启项目:

    在这里插入图片描述
    可以看到,页面字体颜色呈现粉红色。

    打开控制台,还可以看到新的类名:

    在这里插入图片描述
    至此,我们的css-modules配置,也已经完成。


    其他参数配置

    以上配置满足了基本的css-modules使用。如果需要其他配置,可以参考官方资料的案例:

    module.exports = {
      module: {
        rules: [
          {
            test: /\.css$/i,
            loader: "css-loader",
            options: {
              modules: {
                mode: "local",
                auto: true,
                exportGlobals: true,
                localIdentName: "[path][name]__[local]--[hash:base64:5]",
                localIdentContext: path.resolve(__dirname, "src"),
                localIdentHashSalt: "my-custom-hash",
                namedExport: true,
                exportLocalsConvention: "camelCase",
                exportOnlyLocals: false,
              },
            },
          },
        ],
      },
    };
    
    

    这里面列举出了很多可配置项。 都在加在上面modules对象里的。


    参考资料

    • 老版本webpack配置文档 https://github.com/css-modules/webpack-demo
    • css-loader官方说明 https://github.com/webpack-contrib/css-loader
    • 官方less-loader文档 https://webpack.docschina.org/loaders/less-loader/

    补充:支持.less文件模块化

    https://blog.csdn.net/tuzi007a/article/details/124997388


    展开全文
  • yarn add less less-loader --dev
  • less-loader less-loader.js let less = require('less'); function loader(source) { let css; less.render(source, function (err, r) { // r.css css = r.css; }); return css; } module...
  • 安装less less-loader报错

    2022-05-09 22:40:11
    报错信息: Failed to compile with 1 errors Module build failed: TypeError: ...npm install less less-loader@5.0.0 -D 如果继续报错,可以尝试删除项目中的node-modules再重新安装 npm install 再安
  • vue安装lessless-loader

    2022-05-27 06:45:38
    最近安装这个less一直报错,要么是less要么是less-loader,各种百度各种不行,最终我这个方法安装成功了 npm ERR! code ERESOLVE npm ERR! ERESOLVE could not resolve npm ERR! npm ERR! While resolving: @vue/...
  • 当项目中使用less时需要同时引入less-loader,浏览器不能直接编译less,需要less-loaderless语法转化为css css-loader css-loader作用是解析css文件的@import和url语句,处理css模块,并将处理的结果以js模块返回 ...
  • npm install less-loader --save --legacy-peer-deps 加上--legacy-peer-deps就可以了 在NPM v7中,现在默认安装peerDependencies,这会导致版本冲突,从而中断安装过程。 --legacy-peer-deps标志是在v7中引入的...
  • webpack随笔05-less-loader

    2022-05-20 20:03:40
    【前言】 less也是用的比较多的css预编译语音的一...webpack解析less文件需要使用到less-loader,详见:less-loader - npm 用法也比较简单,如下 module.exports = { module: { rules: [ { test: /\.less$/i..
  • npm 安装less 报错
  • ./node_modules/antd/es/button/style/index.less) TypeError: this.getOptions is not a function 原来这个问题也是版本号的问题,直接下载npm i less less-loader下载的都是最新版,导致less-loader版本过高10.xx....
  • webpack css-loader报错: 明明下载了css-loader ,但是终端输入 webpack ./src/main.js ./dist/bundle.js 或 cnpm run build 时,出现 模块生成失败 的信息 这里是 webpack ./src/main.js ./dist/bundle.js 错误...
  • 3、再次运行npm run serve 启动项目 ,报如下错误:Syntax Error: TypeError: this.getOptions is not a function 此问题之前解决过,是由于less-loader版本过高导致,但是发现package.js中less-loader的版本已经是...
  • npm ERR! code ERESOLVE npm ERR! ERESOLVE could not resolve npm ERR! npm ERR! While resolving: css-loader@2.0.2 ... peer webpack@"^5.0.0" from less-loader@10.2.0 npm ERR! node_modules/les..
  • 安装了 npm install --save-dev less-loader style-loader less 警告 npm WARN ajv-keywords@2.1.1 requires a peer of ajv@^5.0.0 but none is installed. You must install peer dependencies yourself. npm ...
  • 安装less-loaderless依赖: 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 = ...
  • less-loader和sass-loader

    千次阅读 2020-05-21 12:05:39
    less-loader 1.less-loader 自动将less转换为CSS 2.less-loader使用: 2.0安装less npm install --save-dev less 2.1安装less-loader npm install --save-dev less-loader 2.2配置less-loader { test: /.less$/, use:...
  • P11.6-webpack配置less-loader 文章目录P11.6-webpack配置less-loader1.概述2.创建less项目2.1.创建项目2.2.配置项目3.安装配置less-loader3.1.安装less-loader3.2.配置less-loader4.构建项目4.1.构建项目4.2.运行...
  • 安装npm install less less-loader后 运行npm run dev 就报错。报错信息如下: 卸载后npm uninstall less less-loader又恢复正常 解决方案:安装方式改成 npm install less less-loader --save-dev ...
  • 1,检查package.json中的dependencies中是否已经引入了lessless-loader依赖, 2,先将lessless-loader卸载再重新安装。 卸载:npm uninstall less less-loader 安装lessless-loader:cnpm install --save ...
  • npm i less less-loader --save安装出错 原因 npm install -g @vue/cli 安装不全 npm install -g @vue/cli

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 35,326
精华内容 14,130
关键字:

less-loader