精华内容
下载资源
问答
  • vue引入全局样式less
    2022-05-24 22:09:39

    现在新建vue2项目会自动安装less和less-loader。再安装一个插件 sass-resources-loader

    npm i sass-resources-loader --save-dev

    vue.config.js中

    module.exports = {
        ......
        chainWebpack: config => {
            const oneOfsMap = config.module.rule('less').oneOfs.store
            oneOfsMap.forEach(item => {
                item
                    .use('sass-resources-loader')
                    .loader('sass-resources-loader')
                    .options({
                        resources: 'xxx/xxx.less'// 全局less文件的地址
                    })
                    .end()
            })
        }
        ......
    }

    在main.js中引入全局less文件

    // 引入公共css
    import "xxx/xxx.less";

    参考了https://www.jianshu.com/p/79ec02d96c88

    更多相关内容
  • vue 引入全局less

    千次阅读 2022-04-11 00:39:37
    vue 引入全局less

    安装

    ~npm i less-loader~

    ~npm i style-resources-loader~
    ~npm i vue-cli-plugin-style-resources-loader~

    ##配置

    const { defineConfig } = require('@vue/cli-service')
    const path = require("path");
    module.exports = defineConfig({
      transpileDependencies: true,
      pluginOptions: {
        'style-resources-loader': {
          preProcessor: 'less',
          patterns: [
            // 这个是加上自己的路径,不能使用(如下:alias)中配置的别名路径
            path.resolve(__dirname, './src/assets/css/global.less')
          ]
        }
      }
    })
    
    

    vue-cli-plugin-style-resources-loader

    展开全文
  • 当你想要在vue项目的一个组件中使用全局样式文件中定义好的变量,此时只在main.js中import是不行的。 目录结构如下: 即在MHeader.vue中想要使用src下的less下的variables.less文件中定义好的变量。 此时,只用...
  • Vue创建项目、安装插件、引入全局less变量

    一、查看npm环境变量配置:

    ①使用快捷键windows+r打开任务管理器
    ②输入cmd进入
    ③检查是否安装,成功会返回版本号

    node -v
    npm -v
    

    安装node:https://nodejs.org/en/download/

    二、创建vue项目,安装插件

    ①切换盘符

    切换E盘:输入  E:
    切换到具体的文件夹:输入  cd E:\工作\2022
    

    ②创建vue项目:vue init webpack luzheng(项目名)
    ③在main.js中引入css公共样式

    import '../static/css/base.css' /*引入公共样式*/
    

    在这里插入图片描述

    ④安装less、less-loader

    npm install less less-loader --save    //一起安装
    

    如果需要下载指定版本:

    npm install less@5.6.0 --save     //下载指定版本的less
    npm install less-loader@5.0.0 --save    //下载指定版本的less-loader
    
    

    安装成功后在package-lock.json文件中有提示:
    在这里插入图片描述

    找到build/webpack.base.conf.js文件,找到module下的rules配置

    {
            test: /.less$/,
            loader: "style-loader!css-loader!less-loader" 
     }
    

    ⑤安装scss

    npm install sass-resources-loader --save-dev
    

    然后在build 的utils.js中exports.cssLoaders = function (options) {}中加上以下代码:

     function lessResourceLoader() {
            var loaders = [
                cssLoader,
                'less-loader',
                {
                    loader: 'sass-resources-loader',
                    options: {
                        resources: [
                            path.resolve(__dirname, '../src/assets/styles/common.less'),
                        ]
                    }
                }
            ];
            if (options.extract) {
                return ExtractTextPlugin.extract({
                    use: loaders,
                    fallback: 'vue-style-loader'
                })
            } else {
                return ['vue-style-loader'].concat(loaders)
            }
        }
    

    path.resolve(__dirname, '../src/assets/styles/common.less') 把路径改成想要引入的全局less 文件, 然后后面将下面代码中的 less: generateLoaders('less') 替换成上面自定义的函数 less: lessResourceLoader()。

    在这里插入图片描述

    修改完配置文件一定要记得重启服务器!!!:npm run dev 运行

    在公共的less文件里定义变量:

    // 颜色
    @baseColor:#fe332d;
    
    // 文字
    @font12:12px;
    @font14:14px;
    @font16:16px;
    @font18:18px;
    

    在这里插入图片描述
    在组件中,就可以使用全局变量了。

    
    <style lang="less" scoped>
    	.to_be_completed {
    		font-size: @font16;
    	}
    
    	.to_be_completed::after {
    		background-color: @baseColor;
    	}
    }
    
    展开全文
  • 主要为大家详细介绍了Vue2.0设置全局样式(less/sass和css),具有一定的参考价值,感兴趣的小伙伴们可以参考一下
  • 一、vue2中安装less并使用 1. 安装依赖包 npm install less less-loader@5 --save-dev 注意:请使用less-loader@5安装less-loader 5.0.0版本,最新版本在vue2中可能无法使用,会报错哦 2、在style标签中添加...

    一、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使配置生效

    展开全文
  • 最近在构建新系统,发现此前没有出现过的less引入报错问题,记录一下。 首先是安装less的过程 (1)安装lessless-loader
  • vue官方脚手架中,即vue-lci搭建的项目中,可以轻易的使用less/sass。 先使用npm下载依赖,命令行为’npm install less less-loader –save’,再在webpack.base.conf.js中添加rules对象: { test: /\.less$/, ...
  • vue3引入全局less Variables和Mixins

    千次阅读 2020-12-26 09:45:45
    一、首先在src/less文件夹下新建variables.less和mixins.less两个文件 1、variables.less文件 @primary: red; @bg: blue; .tt-test { color: @primary; background-color: @bg; } 2、mixins.less文件 /** *...
  • 安装插件 先安装 css 预处理插件 less, less-loader, 然后安装 style-resources... 使用 ======================================================================== css中变量的提取和使用 以及 style中引入css样式
  • 1.第一步:npm install sass-resources...然后在build 的utils.js中exports.cssLoaders = function (options) {}中加上一下代码:function lessResourceLoader() {var loaders = [cssLoader,'less-loader',{loader: ...
  • vue引入全局less1.设置全局样式变量的好处:2.以less为例(sass等同原理)1.vue-cli2搭建的项目(1)2.vue-cli2搭建的项目(2)3.vue-cli3、vue-cli43.vue-cli2和vue-cli3的区别4.vue-cli3和vue-cli4的区别5.vue-cli...
  • 我们开发过程中经常会使用很多 less 全局样式,但是 vue 文件中想使用 less 变量,就需要挨个引入,极其麻烦。 现在我来揭秘: 1. 定义一个 themes.less 文件,将你想用的全局变量装入其中 @primary-color: #32b...
  • 主要介绍了vue component 中引入less文件报错 Module build failed的解决方法,非常不错,具有一定的参考借鉴价值,需要的朋友可以参考下
  • 开发项目的时候遇到一个这样的问题,在App.vue引入less文件但是只能在当前页面有效,无法全局生效。 解决方法:在build文件夹下的utils.js中添加 less: generateLoaders('less').concat({ loader: 'sass-...
  • vue中设置全局less文件

    2022-05-26 20:33:18
    const path = require('path') module.exports = { //关闭eslint lintOnSave:false, // 开启代理服务器 // devServer:{ ... // }, publicPath:'/', ... chainWebpack: config =>... const types = ['vue-mod
  • 这个style文件夹下,一般有reset.css、var.scss、mixin.scss、class.scss、index.scss一般都会在index.scss文件中引入其他文件做统一管理,并在main.js中引入index.scss我们在开发vue文件时,通常会用到全局样式文件...
  • 在每个用到全局变量的组件都引入全局样式文件 @import 'path/fileName.scss' 但是组件或者页面不在统一层目录下,引入的路径可能也会有差异,所以还是看看 sass-resources-loader 的解决方法吧。 sass-r
  • vue-cli3.0 配置使用 less 全局样式

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

    千次阅读 2019-09-20 10:41:54
    vue样式引入存在多种方式,有时候看代码样式从何而来,不得而知,在短暂接触后了解到了有多种引入方式,如有错误欢迎万能的网友指正: 1.个人认为是最为简单方便的引入方式(main.js引入): //全局css import...
  • vue3引入less,使用less全局变量

    千次阅读 2020-09-25 10:41:57
    先下载less:npm i less-loader less --save-dev npm i style-resources-loader --save-dev vue.config.js配置 方法1 css: { // 是否使用css分离插件 ExtractTextPlugin extract: true, // 开启 CSS source maps...
  • 1、安装sass-resources-loader依赖 npminstall sass-resources-loader --save 2、找到build文件夹下面的utils.js文件 var sassResourcesLoader = { ... path.resolve(__dirname, '../src/style/color.less').
  • Vue 配置全局样式两种方式配置,安装 style-resources-loader vue-cli-plugin-style-resources-loader1、安装 style-resources-loader 、 vue-cli-plugin-style-resources-loader。1、安装 style-resources-loader。2...
  • Vue 引用全局公共样式

    2022-04-20 11:30:30
    2,global.less 中写入全局样式 /* 全局样式表 */ html,body{ width:100%; height:100%; margin:0; padding:0; } body,p,dl,dd,ul,ol,li,div,h1,h2,h3,h4,h5,h6,form,input,table,tr,td{ margin:0; padding:0;...
  • 当你想要在vue项目的一个组件中使用全局样式文件中定义好的变量,此时只在main.js中import是不行的。 目录结构如下: 即在MHeader.vue中想要使用src下的less下的variables.less文件中定义好的变量。 此时,...
  • vue less全局引用样式

    千次阅读 2019-05-24 13:26:45
    1.安装; npm install sass-resources-...2. 在文件中创建一个 .less 的文件 3. 在build文件夹中的utils.js文件中 代码片段 return { css: generateLoaders(), postcss: generateLoaders(), less: gene...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 6,407
精华内容 2,562
关键字:

vue引入全局样式less