精华内容
下载资源
问答
  • less定义全局样式
    千次阅读
    2020-10-29 10:29:04

    一、vue2中安装less并使用

    1. 安装依赖包

    npm install less less-loader@5 --save-dev

    注意:请使用less-loader@5安装less-loader 5.0.0版本,最新版本在vue2中可能无法使用,会报错哦

    2、在style标签中添加lang="less"就可以使用less了

    <template>
      <div class="hello">
        <h1>Welcome to Your Vue.js App</h1>
      </div>
    </template>
    
    <!-- Add "scoped" attribute to limit CSS to this component only -->
    <style lang="less" scoped>
    @bg: brown;
    .hello {
      background: @bg;
      h1 {
        font-weight: normal;
        color: @primary;
      }
    }
    </style>
    

    二、全局引入less文件

    1、安装依赖包

    npm install style-resources-loader -D

    2、在build/utils.js文件下配置

      // generate loader string to be used with extract text plugin
      function generateLoaders(loader, loaderOptions) {
        const loaders = options.usePostCSS ? [cssLoader, postcssLoader] : [cssLoader]
    
        if (loader) {
          loaders.push({
            loader: loader + '-loader',
            options: Object.assign({}, loaderOptions, {
              sourceMap: options.sourceMap
            })
          })
        }
    
        // 此处为添加的less全局配置代码,其中patterns里路径为需要使用的全局less文件所在的路径
        if (loader == 'less') {
          loaders.push({
            loader: 'style-resources-loader',
            options: {
              patterns: path.resolve(__dirname, '../src/css/*.less')
            }
          })
        }
    
        // Extract CSS when that option is specified
        // (which is the case during production build)
        if (options.extract) {
          return ExtractTextPlugin.extract({
            use: loaders,
            fallback: 'vue-style-loader'
          })
        } else {
          return ['vue-style-loader'].concat(loaders)
        }
      }
    

    注意:配置完后需要重新执行npm run dev使配置生效

    更多相关内容
  • 文件目录可自定义:我的demo如下图,styles主要用于对于样式全局设置,比如vant样式样式变量等;index.less只要用于对文件的引入 index.less文件中 @import './var'; var.less文件中 @theme-color: #eb0029; ...

    一:新建样式文件

    文件目录可自定义:我的demo如下图;
    styles文件夹主要用于对于样式的全局设置;
    各大文件功能
    index.less只要用于对文件的引入
    vant-reset.less:用于初始化vant样式;
    var.less用于定义样式;
    mixin.less用于将重复代码定义函数
    reset.less用于初始化样式,例如p i标签等等

    在这里插入图片描述

    index.less文件中

    @import './vant-reset';
    @import './var';
    @import './mixin';
    @import './reset';
    

    var.less文件中

    // 主题颜色---例如按钮等等
    @theme-color-light: #fff;
    @theme-color-dark: #e8e8e8;
    // 按钮颜色
    @button-color: #eb0029;
    @button-color-disabled: #fabfc9;
    // 边距设置
    @padding-large: 32px;
    @padding-middle: 24px;
    @padding-small: 16px;
    @padding-mini: 8px;
    

    mixin.less文件中

    // 单行省略号显示
    .ellipsis() {
      overflow: hidden;
      -ms-text-overflow: ellipsis;
      text-overflow: ellipsis;
      white-space: nowrap;
    }
    //多行超出省略号
    /*
    *lineNum: 参数,行数
    */
    .ellipsisLine(@lineNum : 2) {
      word-break: break-all;
      text-overflow: ellipsis;
      display: -webkit-box;
      -webkit-box-orient: vertical;
      -webkit-line-clamp: @lineNum;
      overflow: hidden;
    }
    

    其他.less文件中

    配置自己需要的样式即可,书写规范同less
    

    二:main.js中引入

    / 引入全局样式表1
    import '@/styles/index.less'
    

    三:在页面模块中调用—demo为jsx写法

    index.js文件中

    import styles from './style.module.less'
    export default {
      name: 'test',
      props: {},
      components: {},
      data() {
        return {}
      },
      computed: {},
      watch: {},
      created() {
      },
      mounted() {
      },
      destroyed() {
      },
      methods: {},
      render () {
        return (
          <div class={styles.test}>
            <div class={styles.demo}>测试测试测试测试测试测试测试测试测试测试</div>
          </div>
        )
      }
    }
    
    

    style.module.less文件中

    .test {
      height: 100vh;
      padding: @padding-large; // 变量引用
      background: @theme-color-dark; // 变量引用
    }
    .demo{
      height: 40px;
      line-height: 40px;
      text-align: center;
      color: @theme-color-light; // 变量引用
      background: @button-color-disabled; // 变量引用
      .ellipsisLine(3)  // mixin引用
    }
    
    此时页面重启,会报如下错误,主要原因缺少模块与相关配置

    在这里插入图片描述

    四:解决问题,增加配置

    下载模块

    npm i sass-resources-loader vue-cli-plugin-style-resources-loader --save-dev
    

    增加配置

    方法一:在根目录创建一个vue.config.js的文件
    const path = require("path");
    
    module.exports = {
      pluginOptions: {
        "style-resources-loader": {
          preProcessor: "less",
          patterns: [
            // 自己对应文件路径,全局变量路径,不能使用路径别名
            path.resolve(__dirname, "./src/styles/index.less"),
          ],
        },
      },
    };
    
    方法二:在build 的utils.js中exports.cssLoaders = function (options) {}中加上一下代码
     function lessResourceLoader() {
            var loaders = [
                cssLoader,
                'less-loader',
                {
                    loader: 'sass-resources-loader',
                    options: {
                        resources: [
                          // 自己对应文件路径,全局变量路径,不能使用路径别名
                          path.resolve(__dirname, '../src/styles/index.less'),
                        ]
                    }
                }
            ];
            if (options.extract) {
                return ExtractTextPlugin.extract({
                    use: loaders,
                    fallback: 'vue-style-loader'
                })
            } else {
                return ['vue-style-loader'].concat(loaders)
            }
        }
    
    

    五:重启项目,配置完成

    具体实现效果如下,背景颜色、字体颜色、按钮颜色以及间距等为less变量;单行溢出省略号展示为mixin函数

    在这里插入图片描述

    展开全文
  • vue 通过less 设置全局样式

    千次阅读 2020-07-08 18:52:03
  • 当你想要在vue项目的一个组件中使用全局样式文件中定义好的变量,此时只在main.js中import是不行的。 目录结构如下: 即在MHeader.vue中想要使用src下的less下的variables.less文件中定义好的变量。 此时,只用...
  • react中使用less全局样式

    千次阅读 2019-04-02 07:18:56
    前言:使用create-react-app脚手架搭建的react项目,会自带css和sass,但是没有less,如果在项目中需要使用less,需要进行下载并进行一些配置。 1.配置: (1)暴露webpack配置文件。create-react-app搭建的项目看不...

    前言:使用create-react-app脚手架搭建的react项目,会自带css和sass,但是没有less,如果在项目中需要使用less,需要进行下载并进行一些配置。

    1.配置: (1)暴露webpack配置文件。create-react-app搭建的项目看不到webpack相关配置文件,因此需要输入命令npm run eject将文件暴露出来

    打开webpack.config.js文件,在42行加入

    const lessRegex = /\.(less)$/;
    const lessModuleRegex = /\.module\.(less)$/;  
    复制代码

    在455行加入

     {
                  test: lessRegex,
                  exclude: lessModuleRegex,
                  use: getStyleLoaders({ importLoaders: 3 }, 'less-loader'),          
                },
                {
                  test: lessModuleRegex,
                  use: getStyleLoaders(
                     {
                        importLoaders: 3,
                        modules: true,
                        getLocalIdent: getCSSModuleLocalIdent,
                        modifyVars:{
                          'primary-color': '#1DA57A',
                          'link-color': '#1DA57A',  
                          'border-radius-base': '2px',
                        },
                        javascriptEnabled: true,
                    },
                       'less-loader'
                 ),
                },
    复制代码

    保存即可

    2.下载:控制台输入yarn add less less-loader --save

    3.建立less文件,此处为省事直接在src文件夹下建了一个common.less文件

    保存即能看到样式已经应用

    展开全文
  • vue less设置全局变量

    2021-05-13 17:34:52
    使用 style-resources-loader 配置全局 less 变量
  • less全局公共样式

    2021-09-18 14:10:23
    less全局公共样式vue.config.jscommon.lessa.vue 基于vue2和style-resources-loader(1.4.1) vue add style-resources-loader vue.config.js module.exports = { pluginOptions: { 'style-resources-loader': { ...
  • vue项目设置less全局变量
  • 定义:app.wxss page { --themeColor: #fff; } 使用:demo.wxss .demo { background-color: var(--themeColor); }
  • 使用JS更改全局样式.less

    千次阅读 2021-12-23 11:24:41
    使用JS更改全局样式.less
  • 当你想要在vue项目的一个组件中使用全局样式文件中定义好的变量,此时只在main.js中import是不行的。 目录结构如下: 即在MHeader.vue中想要使用src下的less下的variables.less文件中定义好的变量。 此时,...
  • vue-使用sass定义全局样式及变量

    千次阅读 2020-11-20 09:21:12
    vue-cli2使用sass定义全局样式及变量 vue-cli2创建的vue项目使用sass预处理器需按顺序安装以下插件,其中sass-loader版本和node-sass需要安装固定版本,其他的依赖不要求版本,亲测有效。如果不不固定sass-loader和...
  • 1.npm全局安装less: npm install less -g --save 2.创建 main.less 文件,复制内容如下: // main.less @width: 100%; @height: 100px; @color: red; .container{ width: @width; height: @height; ...
  • 在根元素下自定义一些变量的样式 */ :root{ border:1px solid blue;/* 设置样式 */ --bg-color:red;/* 设置自定义的样式 */ --font-size:30px; --height-min:100px; } 2.在最外层的组件入口引入即可: @...
  • vue-cli3.0 配置使用 less 全局样式

    千次阅读 2021-11-25 10:13:48
    在css样式文件夹中新增 global.less 作为全局样式,在 main.js 中通过 import 导入,可正常使用样式,但 global.less定义的样式属性还不能全局使用,需通过以下方法配置。 1、安装 style-resources-loader 和 vue...
  • less在Vue中全局使用变量样式颜色

    千次阅读 2020-06-05 16:40:51
    定义全局less文件颜色 @primary-color : #5F69B2; @primary-color-1 : #F4F6FA; @info-color : #6D84D1; @success-color : #4BB08D; @processing-color : @primary-color; @warning-color : #EC972B; @error-color ...
  • 使用less全局变量的配置 1. 配置全局less 使用less先安装less less-loader,nuxt会自动识别导入的后缀名,在nuxt.config.js中配置 css: [ /** * 配置全局 css */ 'element-ui/lib/theme-chalk/index.css', '@...
  • 为Vue设置全局样式需要几个步骤(如果是sass将less改成sass即可)第一步:在src目录下的main.js,也就是入口文件里面添加下面代码css-loader!less-loader!./common/less/index.less')在Vue1.0版本中可以这样写,但是2.0...
  • Vue项目全局使用less样式,less

    千次阅读 2019-01-02 14:24:59
    时间过得真快,距离上一篇文章都已经是去年了,以前还想着经常发布些...我这里以less文件为例(less还是很好用的)安装less, 这是基础cnpm install less less-loader --save复制代码要想全局使用还需使用一个插件( sas...
  • Umi4+react,使用less全局变量
  • less 常量全局配置

    2020-09-19 11:42:12
    在使用Vue开发的过程中,通常会用到一些样式全局变量,如果在每个组件中引入就太繁琐了,维护性也不好,因此全局引入是个不错的想法。下面以less为例,记录一下全局引入less变量的步骤: 1、首先安装依赖 在项目...
  • css全局样式设置 问题描述:一个项目往往是有非常多的界面组成,当我们在编写代码的时候,这些界面就会有很多重复使用的/公共的样式重叠。这时候,可以将这些样式抽离出来放在一个共享文件里,将样式作用到各个界面...
  • 王元肉==>个人主页 大家一起加油,我喜欢分专栏将...文章结构全局样式局部样式使用xxx.module.css实现使用sass,less等css预处理器安装使用缺陷 全局样式 App.js import './App.css'; function App() { return
  • 关于less引入全局变量或者函数的问题总结 因为本认使用的是vue2 + vuecli4创建的项目,以下解决方案均为以下环境 最近考虑写一个公司字用的UI框架,就想着自己整理一下目前市面上常用的功能!css编译用了less,...
  • vue+less使用全局变量

    千次阅读 2021-09-18 11:39:53
    1、新建全局样式文件common.less,并自定义变量。 2、安装插件npm install sass-resources-loader --save-dev, 然后找到build文件夹下面的utils.js修改less css: generateLoaders(), postcss: generateLoaders(), ...
  • vue+less 实现全局变量和换肤功能
  • 众所周知,react的css在默认情况下无论在哪个组件引用,都是全局的,后 覆盖 前(对于权重高的不覆盖,相当于css的书写顺序) 准备 react暴露配置文件 react配置less-loader 配置antd-mobal按需引入 在上面基础之上,...
  • umi3中全局样式添加

    千次阅读 2021-06-01 17:47:06
    就这,我发现添加完没有效果,以为要在.umi下的umi.ts中去加一行require('../global.less');没想到这个根本就是自动生成的嘛,重新跑一下yarn start就生成了。 这方面平时弄少了啊!
  • button> div> div> template> <style lang="scss" scoped>style> 引入成功啦 ~ 引入样式: src/styles/index.scss 全局样式, 在入口模块被加载生效 src/styles/mixin.scss 公共的 mixin 混入 (可以把重复的样式封装...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 13,814
精华内容 5,525
关键字:

less定义全局样式