zoukankan      html  css  js  c++  java
  • 在vue项目中引入less

    本文将简单介绍在vue2.x的环境下引入并使用less的流程

    1、安装less

    在项目的根目录下打开命令行工具,执行命令:

    npm install less less-loader --save-dev
    

    安装完成后打开 build目录,修改 webpack.base.conf.js 中的相关配置:
    在 module.exports 中找到 module 中的 rules 数组
    添加如下代码:

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

    2、使用less

    在.vue文件的 style 标签中添加 lang="less"后,即可采用less的语法编写CSS代码
    引入变量(varibles)和混合(mixins)的写法如下:
    在 src/assets/目录下新建 styles 目录,并在此目录下编写 varibles.less 和 mixins.less
    编写CSS代码时通过 import 引入:

    <style scoped lang="less">
    @import '../assets/styles/varibles.less';
    @import '../assets/styles/mixins.less';
    /* 样式代码 */
    </style>
    

    3、问题解决

    在初次安装less后,在本地使用npm run dev运行项目时出现报错:

    TypeError: loaderContext.getResolve is not a function
    

    这很有可能是less-loader版本过高导致的,解决方法如下:
    卸载现有less-loader

    npm uninstall less-loader
    

    重新安装低版本的less-loader

    npm install less-loader@4.1.0 --save
    
  • 相关阅读:
    [恢]hdu 1412
    [恢]hdu 2212
    [恢]hdu 1407
    [恢]hdu 1228
    [恢]hdu 1337
    [恢]hdu 1014
    [恢]hdu 2200
    定居到博客园了!
    比较GridView,DataList,Repeator ,DetailsView,FormView
    随手记录修改某条记录时,不使用数据库控件而用datareader
  • 原文地址:https://www.cnblogs.com/baebae996/p/13665002.html
Copyright © 2011-2022 走看看