精华内容
下载资源
问答
  • 定义背景图片使用 @baseName:wrap; //url 定义: @img : "../img"; @img :'../image'; #@{baseName}{ width: @c*10; height: @b*10; background: url('@{img}/less.jpg'); } url定义图片的路径 background:url...

    less视频教程

    https://ke.qq.com/course/3547381?tuin=a9c74247

     

    定义背景图片使用

    @baseName:wrap;
    //url 定义: @img : "../img";
    @img :'../image';
    
    #@{baseName}{
    width: @c*10;
    height: @b*10;
    background: url('@{img}/less.jpg');
    }

    url定义图片的路径

    background: url('@{img}/less.jpg');

     

    //错误简写
    background: url("@{images}/white-sand.png") 14px 14px;//少图片位置属性 图片不会显示
    //正确简写
    background: url("@{images}/white-sand.png") center/14px 14px
    }

    图片平铺 位置

    #@{baseName}{
    width: @c*10;
    height: @b*10;
    background: url('@{img}/less.jpg') center center/ cover;
    }


     

     

    展开全文
  • 1. 处理 less 文件 步骤: 1 安装包: npm i -D less-loader less npm i -D style-loader css-loader 2 在 webpack.config.js 的 module 中添加一个规则 ...file-loader 对图片进行重命名,然后,加载...

    1. 处理 less 文件

    步骤:
    1 安装包: npm i -D less-loader less
               npm i -D style-loader css-loader
    2 在 webpack.config.js 的 module 中添加一个规则

    2. 处理图片文件 url-loader 或者 file-loader

    file-loader 对图片进行重命名,然后,加载图片

     1 安装: npm i -D file-loader
     2 在 webpack.config.js 中的 module 里面添加一个rules

    自己写的路径为:../imgs/a.jpg

    文件路径被重命名为: 1ddb3677198212f7fea7ca4b9de18dcb.jpg

    原理:

    MD5 加密算法(消息摘要算法) 通常就是 32 位

    对于同一个文件或者字符,不管使用 md5 处理过多少次,那么,得到的 32位字符串都是相同的

    在 file-loader 中,使用 md5 处理后,对于同一张不同名称的图片,只会加载一次,而如果不进行 md5 处理,就会加载两次,而这两张图片实际上就是同一张,实际上加载一次就可以了,这样的话,可以达到减少网络请求,加快网站的加载速度。

    MD5 在项目中,一般可以用来进行密码加密处理

    用户名 + 密码 ====> md5( 密码 ) ===> 1ddb3677198212f7fea7ca4b9de18dcb => 存储到数据库中

    推荐使用 url-loader

    1 安装: npm i -D url-loader
      最好将 file-loader 一起安装
    2 在 webpack.config.js 中,只要将 file-loader 替换为 url-loader 就可以了

    url-loader 默认情况下,会将图片处理为base64编码的格式,base64 适合处理小图标,直接内嵌在页面中,减少了请求次数

    data:image/png;base64, ....

    .babelrc
    {
      "presets": ["env", "stage-2"]
    }

    babel 是一个JS编译器,能够将最新的JS语法转化为浏览器能够识别的代码

     npm i -D babel-core babel-loader@7 babel-preset-env babel-preset-stage-2

    3. webpack.config.js

    // 注意: 不要使用 ES6 中的模块化语法 import/export
    const path = require('path')
    // const webpack = require('webpack')
    
    // 导入html-webpack-plugin
    const HtmlWebpackPlugin = require('html-webpack-plugin')
    
    // 处理Vue单文件组件的插件
    const VueLoaderPlugin = require('vue-loader/lib/plugin')
    
    module.exports = {
      // 入口
      entry: path.join(__dirname, './src/main.js'),
    
      // 出口
      output: {
        path: path.join(__dirname, './dist'),
        filename: 'bundle.js'
      },
    
      // 模式
      mode: 'development',
    
      devServer: {
        // 自动打开浏览器
        open: true,
        // 修改端口号
        port: 3000
        // 热更新: 只将修改过得内容加载到页面中, 而不是刷新整个页面
        // 第一步:
        // hot: true
      },
    
      // 配置loader
      module: {
        rules: [
          // test 是一个正则, 用来匹配加载文件的路径
          //  比如: import './css/index.css'
    
          // use 表示使用哪个loader来处理这个类型的文件
          // 注意: 有顺序!!!
          // 处理过程是: 从右往左
    
          // css-loader 读取CSS文件,将其转化为一个模块
          // style-loader 拿到css-loader读取到的css文件内容,然后,创建一个style标签,插入到head
          { test: /\.css$/, use: ['style-loader', 'css-loader'] },
          { test: /\.less$/, use: ['style-loader', 'css-loader', 'less-loader'] },
    
          // 处理图片
          // {
          //   test: /\.(jpg|jpeg|png|gif)$/,
          //   use: 'file-loader'
          // },
    
          {
            test: /\.(jpg|jpeg|png|gif)$/,
            // use: 'url-loader'
            use: [
              {
                loader: 'url-loader',
                options: {
                  // 单位:字节, 8Kb
                  // 如果图片的大小比 8kb 小,图片就会被处理为 base64
                  // 如果图片的大小大于或等于 8kb ,url-loader会自动调用 file-loader 来对图片重命名处理
                  // limit: 8192
                  limit: 49877
                }
              }
            ]
          },
    
          // 处理字体
          {
            test: /\.(eot|svg|ttf|woff|woff2|otf)$/,
            // use: 'file-loader'
            use: 'url-loader'
          },
    
          // 配置babel
          {
            test: /\.js$/,
            use: 'babel-loader',
            // 排除掉不需要 babel 处理的文件路径
            // 一般,都会将 node_modules 排除掉
            exclude: /node_modules/
          },
    
          // 处理Vue单文件组件
          {
            test: /\.vue$/,
            use: 'vue-loader'
          }
        ]
      },
    
      plugins: [
        // 第二步:
        // new webpack.HotModuleReplacementPlugin(),
    
        new HtmlWebpackPlugin({
          // 指定模板文件路径
          template: path.join(__dirname, 'index.html')
        }),
    
        new VueLoaderPlugin()
      ]
    }
    

     

     

    展开全文
  • Vue学习笔记之Webpack中css、less图片等文件处理

    万次阅读 多人点赞 2020-08-09 18:54:15
    一、webpack中使用css文件: loader是webpack中一个非常核心的概念,去转化webpack...PS:css-loader只负责将css文件进行加载,所以还需要style-loader负责将样式添加到DOM中,让css文件起作用,通过cnpm install styl

    一、webpack中使用css文件:

    loader是webpack中一个非常核心的概念,去转化webpack不能转化或打包的文件。

    安装loader:

    官网介绍:

    安装: cnpm install --save-dev css-loader

    loader配置:

    然后再进行打包动作:npm run build

    PS:css-loader只负责将css文件进行加载,所以还需要style-loader负责将样式添加到DOM中,让css文件起作用,通过cnpm install style-loader --save-dev 安装环境

    // css-loader只负责将css文件进行加载

    // style-loader 负责将样式添加到DOM中

    // 使用多个loader时,是从右到左进行执行的

    然后通过npm run build 打包,运行,测试成功:

     

    二、webpack-less的使用

    Less 是一门 CSS 预处理语言,它扩充了 CSS 语言,增加了诸如变量、混合(mixin)、函数等功能,让 CSS 更易维护、方便制作主题、扩充。Less 可以运行在 Node 或浏览器端。

    安装less环境:cnpm install --save-dev less-loader less

    然后在webpack.config.js配置less环境:

    然后重新打包,运行,测试成功:

    PS:安装过程中,高版本的在打包时会报错,建议还是与其他组件配套的版本进行安装,我这边是安装了cnpm install --save-dev less-loader@4.1.0 less

     

    三、webpack的图片使用

    图片处理,需要用到url-loader 像 file loader 一样工作,但如果文件小于限制,可以返回 data URL

    安装环境:cnpm install --save-dev url-loader@4.1.0

    配置环境:

    PS:当加载的图片大小于limit时,会将图片编译成base64字符串形式;

    如果加载的图片大于limit时,则需要file-loader的环境进行加载,否则打包时会报错,此时直接安装相关环境即可,不需要配置:cnpm install --save-dev file-loader@4.1.0 。

    但是通过file-loader打包的url文件,系统会去打包文件夹dist目录下找相关文件,需要指定加载图片的位置,所以在配置文件中增加一个属性:publicPath: 'dist/' //只要打包涉及到URL的文件,则自动在路径前面增加一个dist/的路径:

    重新打包,测试运行成功(已经添加背景图片):

    file-loader的情况:

    PS:通过file-loader打包的图片,是一个32位hash值,目的是为了防止名字重复:

    为了使名字规范,可以在配置文件options进行配置,图片名字再拼接一个8位的hash值:

    name: 'img/[name].[hash:8].[ext]' // 注意格式

    重新打包后则生成一个原来名字拼接上一个8位hash值名字的图片:

    运行后的结果:

     

     

    展开全文
  • 从下往上加载,会使用三个loader,每个作用不一样,见图中注释 less是个工具包,webpack用来将less编译为css文件   webpack处理图片资源文件 还有json文件资源等等     打包...

     

    webpack:静态模块化打包工具

     

     

     

     

     

    --save 命令是将依赖配置保存到package.json文件中 

    -dev是指在package.json文件中 将此依赖配置到devdependencies中,只有开发时依赖,打包上线运行后不再依赖使用

    -g 是global全局的缩写,是全局安装,安装之后,在任意的命令窗口都可以使用,相当于在path环境中配置了路径

    当在package.json中配置了script脚本,运行run npm 命令时会优先使用本地的webpack

     

     

     

     

    webpack使用css文件的配置

     

     

     

    webpack处理less文件

    安装和配置

    从下往上加载,会使用三个loader,每个作用不一样,见图中注释

    less是个工具包,webpack用来将less编译为css文件

     

    webpack处理图片资源文件

    还有json文件资源等等

     

     

    打包之后会对图片进行重命名,使用哈希命名,避免重复文件名

     

    ES6语法处理

     

    webpack引入vue.js

     

     

     

     

     

     

     

    展开全文
  • 2.中文解释:加载器就是用来load(加载)一个文件,比如说babel-loader就是用来加载高级的JS把它变成低版本浏览器支持的JS,css-loader和style-loader是用来加载CSS,然后把它变成页面的标签,还可以加载图片文件...
  • 第二步:webpack.config.js中配置文件,因为webpack默认打包js文件,如果引入其他格式图片文件,需要用对应的加载器插件处理该文件,把代码解析成js文件,才可以加载图片等格式文件 https://www.webpackjs.c...
  • Vue组件引入less文件,图片路径问题 less函数存放和使用文件位置介绍 错误写法 这样写,在m-header文件中直接相对m-header文件位置调用logo图片会报路径错误的 .bg-image(‘logo’) 正确写法 注意: 1....
  • bootstrap Less

    千次阅读 2016-10-14 23:36:44
    bootstrap Less
  • react+webpack中less中引入图片的问题

    千次阅读 2018-07-06 22:37:21
    1:引入url-loader和html-withimg-loader 之后需要手动把图片复制到build文件夹下面才能正常显示 2:如何让他自动生成文件夹?url-loader网上的方法是不行的; 最终都采用手动挪的方式算了
  • 报错:* …/src/assets/images/jjg/buy/btn_bg@2x.png in ./node_modules/css-loader?{“sourceMap”:true}!... 原因:所以这里添加的~实际是为了告诉webpack这里是从根目录开始寻找,而不是相对目录。
  • 本篇我们一起来进行在webpack中如何处理css,用模块化的方式来添加样式,使用webpack最重要的核心思想就是:一切皆模块 一、配置步骤 1.我们先在src下创建一个css文件夹,再css文件夹下在创建样式文件。 1.那么又...
  • less学习

    2018-03-16 20:09:01
    是一个css预编译器,可以扩展css语言,添加功能如允许变量,混合、函数和许多其他的技术,让你的css更具有维护性、丰富性、扩展性。2、初识less.content ul {} // 在css中的用法 .content li {} .content li a {} ....
  • webpack 的别名好处大家也都了解, 但是 vue 的模板中, 对图片地址使用别名时总出现问题, 很久时间的时间都没找到解决办法, 一度认为是 webpack 的原因... alias: { 'src': path.resolve(__dirname, '../src'), ...
  • 初识less

    2016-01-31 13:06:00
    1.less的引用 less是css的预编译 预编译器:考拉koala 注释符号://只在less中显示 /**/在css和less中显示 直接引用less文件还需引入less.js,注意rel="stylesheet/less";一般是编译后引用 2.less的变量 ...
  • 在使用less在Vue.js中给元素添加背景图片时 或者你会出现这样的写法background-image: url('../img/' + @{bg_url} + '2x.png');或者这样background-image: url('../img/' + @bg_url + '2x.png');这样background-...
  • Sass和Less

    2021-04-19 10:30:07
    PART4_1 Sass和Less ​ Sass和Less都属于CSS预处理器,CSS 预处理器定义了一种新的语言,其基本思想是,用一种专门的编程语言,为 CSS 增加了一些编程的特性,如:变量、语句、函数、...添加插件后只需要在新建文件.
  • 如果要处理 非 JS 类型的文件,我们需要手动去安装一些 合适的 第三方 loader 加载器; 1.如果想要打包处理 css 文件,需要安装 npm i style-loader css-loader -D 2.打开webpack.config.js 这个配置文件,在里边,...
  • vue中使用less

    2017-10-07 18:26:43
    第一步: 安装less依赖,npm install less ...修改webpack.base.conf.js文件,配置loader加载依赖,让其支持外部的less,在原来的代码上添加 { test: /\.less$/, loader: "style-loader!css-loader!less-loader", },
  • LESS简介

    2016-05-10 16:38:00
    LESSCSS是一种动态样式语言,属于CSS预处理语言的一种,它使用类似CSS的语法,为CSS的赋予了动态语言的特性,如变量、继承、运算、函数等,更方便CSS的编写和维护。 LESSCSS可以在多种语言、环境中使用,包括浏览器...
  • 背景:React使用create-react-app...需求:实现antd组件按需加载与修改主题。 暴露配置:yarn eject (项目下多了scripts 和 config 文件[就是我们webpack 的配置]) yarn add less-loader yarn add less { ...
  • less 随手记

    2018-10-12 17:41:39
    less 随笔使用变量普通值变量选择器变量url 变量声明变量变量运算变量作用域嵌套普通嵌套& 的作用媒体查询混合普通混合无参数的混合默认参数的混合命名参数匹配模式arguments方法使用 important!继承...
  • LESS笔记

    2017-12-03 15:16:00
    电脑已经安装有node.js 打开命令行 输入 npm install –g less 2.配置webstrom Files→ settings→ tools→ file watchers 点击“+”号按钮找到刚才安装的lessc.cmd文件选项点击添加 配置输出路径: ...
  • 如何编译.less文件(less.js)

    千次阅读 2018-12-03 14:59:22
    有多少种方式可以将.less文件转换为.css文件 Less给 CSS 加点料!Less (Leaner Style Sheets 的缩写) 是一门向后兼容的 CSS 扩展语言,因为 Less 和 CSS 非常像,学习很容易。而且 Less 仅对 CSS 语言增加了...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 31,647
精华内容 12,658
关键字:

less加载图片