Vue2.0设置全局样式步奏详解

这次给大家带来Vue2.0设置全局样式步奏详解,Vue2.0设置全局样式的步奏详解的注意事项有哪些,下面就是实战案例,一起来看一下。

为Vue设置全局样式需要几个步骤(如果是sass将less改成sass即可)

第一步:在src目录下的main.js,也就是入口文件里面添加下面代码

require('!style-loader!css-loader!less-loader!./common/less/index.less')

登录后复制

在Vue1.0版本中可以这样写,但是2.0版本中就不行,会报错提示解析错误

require('./common/less/index.less')

登录后复制

第二步:在build目录下的webpack.base.conf.js配置模块,只需要在 rules下面加两个模块即可

module.exports = { module: { rules: [  {  test: /.less$/,  loader: 'style-loader!css-loader!less-loader'  },  {  test:/.css$/,  loader:'css-loader!style-loader',  } ]  }  }

登录后复制

第三步:若提示报错,可能你没有安装以上依赖,需要你在根目录下的package.json文件中添加依赖

Vue2.0设置全局样式(less/sass和css)

第四步:在命令窗口中执行命令,进行安装依赖

npm install

登录后复制

linux(ubuntu,deepin),Mac os系统可能会提示权限不足需要获取权限那么只需要在前面获取权限即可

sudu npm install

登录后复制

之后如果需要使用less的话,只要在style添加lang属性就好了


登录后复制

若公共文件较多 可以整个在一个文件 在通过公共文件链接 实现多个样式文件全局样式

相信看了本文案例你已经掌握了方法,更多精彩请关注【创想鸟】其它相关文章!

推荐阅读:

element-ui怎样实现复用Table的组件

js的作用域使用详解

Vue2.0设置全局样式(less/sass和css)JS+canvas做出围绕旋转动画

以上就是Vue2.0设置全局样式步奏详解的详细内容,更多请关注【创想鸟】其它相关文章!

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容, 请发送邮件至253000106@qq.com举报,一经查实,本站将立刻删除。

发布者:PHP中文网,转转请注明出处:https://www.chuangxiangniao.com/p/2772243.html

(0)
上一篇 2025年3月8日 13:12:22
下一篇 2025年2月25日 05:41:19

AD推荐 黄金广告位招租... 更多推荐

相关推荐

  • Node的模块系统使用详解

    这次给大家带来Node的模块系统使用详解,Node模块系统使用的注意事项有哪些,下面就是实战案例,一起来看一下。 模块是构建应用程序的基础,也使得函数和变量私有化,不直接对外暴露出来,接下来我们就要介绍Node的模块化系统和它最常用的模式 …

    编程技术 2025年3月8日
    200
  • 在ES6里模板字符串使用详解

    这次给大家带来在ES6里模板字符串使用详解,在ES6里模板字符串使用的注意事项有哪些,下面就是实战案例,一起来看一下。 写在前面 关于 ES6, 也终于在 2015 年的 7 月 18 号尘埃落定了。虽然说各大浏览器还没有全面的支持,不过这…

    编程技术 2025年3月8日
    200
  • vue中SPA单页面应用程序详解

    这次给大家带来vue中SPA单页面应用程序详解,使用vue中SPA单页面应用程序的注意事项有哪些,下面就是实战案例,一起来看一下。 一、SPA的概述 SPA(single page application)单页面应用程序,在一个完成的应用或…

    编程技术 2025年3月8日
    200
  • angular组件间传值与通信使用详解

    这次给大家带来angular组件间传值与通信使用详解,angular组件间传值与通信的注意事项有哪些,下面就是实战案例,一起来看一下。 本文主要介绍angular在不同的组件中如何进行传值,如何通讯。主要分为父子组件和非父子组件部分。 父子…

    编程技术 2025年3月8日
    200
  • Vue全家桶项目实践详解

    这次给大家带来Vue全家桶项目实践详解,使用Vue全家桶实现项目的注意事项有哪些,下面就是实战案例,一起来看一下。 从前端的角度看,Vue可以说是目前最理想的前端MVVM框架,一切为界面服务,上手难度低,本文就将记录使用Vue全家桶(Vue…

    编程技术 2025年3月8日
    200
  • vue2.0在table中全选和反选

    这次给大家带来vue2.0在table中全选和反选,vue2.0在table中全选和反选的注意事项有哪些,下面就是实战案例,一起来看一下。 具体怎么实现的呢? 使用localstorage来存储页面信息 中已经有写项目是怎么创建的所以小颖在…

    编程技术 2025年3月8日
    200
  • JS按钮禁用和启用使用详解

    这次给大家带来JS按钮禁用和启用使用详解,使用JS按钮禁用和启用的注意事项有哪些,下面就是实战案例,一起来看一下。 废话不多说了,直接给大家贴代码了,具体代码如下所述: 按钮启用和禁用function btn1(){ document.ge…

    编程技术 2025年3月8日
    200
  • vue中v-model动态使用详解

    这次给大家带来vue中v-model动态使用详解,vue中v-model动态使用的注意事项有哪些,下面就是实战案例,一起来看一下。 前言: 最近在做公司的项目中,有这么一个需求,每一行有一个input和一个select,其中行数是根据服务器…

    编程技术 2025年3月8日
    200
  • vue-resource拦截器设置头信息的步奏详解

    这次给大家带来,的注意事项有哪些,下面就是实战案例,一起来看一下。 使用vue-resource,设置头信息: Vue.http.interceptors.push((request, next) => { request.heade…

    编程技术 2025年3月8日
    200
  • 在vue2中使用ref步奏详解

    这次给大家带来在vue2中使用ref步奏详解,在vue2中使用ref的注意事项有哪些,下面就是实战案例,一起来看一下。 本文介绍了vue2里面ref的具体使用方法,分享给大家,具体如下。 1、我们先定义两个组件 html部分 登录后复制 j…

    编程技术 2025年3月8日
    200

发表回复

登录后才能评论