解决vue-cli3创建使用iview定制主题javascriptEnabled找不到该配置项

当使用vue-cli3创建项目并使用iview做UI组件库时,可能会遇到找不到javascriptEnabled配置项的问题,这是因为javascriptEnabled是Less-loader的配置项,而iview使用的是Less的定制主题。

为了解决该问题,需要在项目根目录下创建vue.config.js文件,在该文件中配置Less-loader的javascriptEnabled选项。

具体步骤如下:

  1. 在项目根目录下创建vue.config.js文件。

  2. 在文件中添加以下代码:

module.exports = {
  // configureWebpack选项是一个对象,其中可以设置webpack的配置
  configureWebpack: {
    // rules属性可以配置一系列的规则,每一个规则将会包含一个或多个loader
    module: {
      rules: [
        // 对于less文件使用的是less-loader和css-loader进行解析
        {
          test: /\.less$/,
          use: [
            'vue-style-loader',
            'css-loader',
            {
              loader: 'less-loader',
              options: {
                // 通过javascriptEnabled选项为true使得在less文件中可以使用javascript函数
                javascriptEnabled: true
              }
            }
          ]
        }
      ]
    }
  }
}
  1. 重新运行项目,此时应该就能正常运行并使用iview的定制主题了。

示例1:

<template>
  <Button type="primary">测试按钮</Button>
</template>

<script>
import { Button } from 'iview';

export default {
  components: {
    Button
  }
};
</script>

示例2:

@import '~iview/src/styles/base/index.less';

// 定义一个自定义主题变量
@myColor: #F00;

// 使用自定义主题变量
body {
  background-color: @myColor;
}

本站文章如无特殊说明,均为本站原创,如若转载,请注明出处:解决vue-cli3创建使用iview定制主题javascriptEnabled找不到该配置项 - Python技术站

(0)
上一篇 2023年6月9日
下一篇 2023年6月9日

相关文章

  • css屏幕居中的方法(推荐)

    下面我给您详细讲解“CSS屏幕居中的方法(推荐)”的完整攻略。 方法1:使用 Flexbox实现居中 步骤1:设置父元素的display为flex,让子元素可以排列 .container{ display: flex; } 步骤2:使用justify-content和align-items设置子元素的居中方式 justify-content属性是用来设置主轴…

    css 2023年6月9日
    00
  • css a标签的visied伪类失效原因介绍

    针对“css a标签的visited伪类失效原因介绍”这个问题,我将为您提供完整的攻略。 1. 问题分析 a:visited 伪类选择器用于选择用户已经访问过的链接,可以通过设置其样式来改变链接的外观。但有时我们会发现这个伪类选择器失效了,即所设置的样式并没有被应用到已访问过的链接上。 这些是 a:visited 失效的主要原因: 浏览器的安全策略 其他选择…

    css 2023年6月10日
    00
  • ANT 压缩(去掉空格/注释)JS文件可提高js运行速度

    对于前端项目,JavaScript文件往往是最大的一个个体文件,优化他的运行速度对整个网站性能的提升是极为重要的。使用ANT工具可以压缩JavaScript文件,去掉一些不必要的空格和注释,并且经过压缩后的文件不会对原有的代码结构和逻辑产生任何影响。 以下是使用ANT压缩JavaScript文件的完整攻略: 1、安装ANT 首先你需要安装ANT工具,可在官网…

    css 2023年6月9日
    00
  • CSS/HTML

    CSS/HTML攻略 CSS和HTML是前端开发中必备的两个技能。其中HTML负责网页的文字、图片等内容的结构构建,而CSS则负责网页的样式、排版等方面的设计。下面是使用CSS和HTML进行网页设计和开发的完整攻略: 第一步: HTML文件的结构构建 首先需要构建网页的基本结构,一般分为以下几个部分: head标签 <!DOCTYPE html>…

    css 2023年6月9日
    00
  • HTML+CSS实现导航条下拉菜单的示例代码

    要实现导航条下拉菜单,我们需要使用HTML和CSS技术,具体步骤如下: 1. HTML基础结构 首先创建一个基础的HTML结构,包含导航栏和下拉菜单的容器。我们可以使用<ul>和<li>标签来创建导航栏,使用<div>标签为下拉菜单创建一个容器。示例HTML代码: <!DOCTYPE html> <htm…

    css 2023年6月11日
    00
  • jQuery实现div浮动层跟随页面滚动效果

    让我来为您详细讲解“jQuery实现div浮动层跟随页面滚动效果”的完整攻略: 1. 引入jQuery库 在页面中引入jQuery库,可以使用CDN或者下载后引入本地: <script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script&gt…

    css 2023年6月10日
    00
  • css3实现小箭头各种图形效果

    下面是关于“CSS3实现小箭头各种图形效果”的完整攻略: 1. 使用伪元素实现基本三角形 在CSS3中,我们可以通过使用伪元素的方法来快速地实现一个基本的三角形图形,代码如下: .arrow { width: 0; height: 0; border-top: 10px solid transparent; border-bottom: 10px solid…

    css 2023年6月10日
    00
  • 网页设计经验之杜绝设计中的视觉噪音(图文)

    网页设计中,视觉噪音是指过度复杂、过度花哨或过于杂乱的设计元素所带来的视觉干扰,使得用户难以关注主要内容并影响用户体验。因此,杜绝视觉噪音是一项关键的网页设计经验。以下是完整攻略。 1. 确定设计主题 在网页设计之前,要先确定设计主题,确保主题与网站的目的、用户类型和品牌理念相符。一个清晰简洁的主题可以帮助你将视觉元素保持在一个有限的范围内,以避免视觉噪音。…

    css 2023年6月10日
    00
合作推广
合作推广
分享本页
返回顶部