zoukankan      html  css  js  c++  java
  • Vue cli 工程中使用 style-resources-loader 预加载全局less文件

    1. 关于 style-resources-loader

    它是一个用于Webpack的CSS(预处理器)样式资源加载器,其能够将全局性的样式注入到如css, sass, scss, less, stylus等模块中。

    2. 在vue cli项目中使用 style-resources-loader

      2.1 在工程文件夹下开启终端,执行下行命令 (前提:本地vue cli环境已经配置好)

    vue add style-resources-loader

      2.2 vue.config.js 中会新增下述代码(没有vue.config.js文件,会被创建)

    // vue.config.js(示例代码)
    const path = require('path');
    
    module.exports = {
      // ...
      pluginOptions: {
        'style-resources-loader': {
          preProcessor: 'less',
          patterns: [
            path.resolve(__dirname, `src/assets/less/variables.less`)
          ]
        }
      }
      // ...
    };

      2.3 在具体的页面文件中直接使用全局的less变量(重新启动项目开发环境)

    .demo {
      color: @primary-color;
    }

    style-resources-loader 的npm地址:https://www.npmjs.com/package/style-resources-loader

  • 相关阅读:
    逻辑架构设计目标和任务
    业务架构设计
    架构设计概念
    可扩展设计:如何做到增加功能不修改调用方代码?
    P2661 信息传递
    Network of Schools POJ
    1002 过河卒
    P3254 圆桌问题
    P2765 魔术球问题
    P1141 01迷宫
  • 原文地址:https://www.cnblogs.com/fanqshun/p/14755327.html
Copyright © 2011-2022 走看看