老师,Vue项目中能使用less等工具吗?css样式表引入

老师,Vue项目中能使用less等工具吗?css样式表引入

用Vue的话,样式都直接写在.vue页面中的<style>标签里了,那还能用引入样式表的方式引入吗?就是用<link>引入那种?

在Vue中如何使用less呢?

正在回答 回答被采纳积分+1

登陆购买课程后可参与讨论,去登陆

3回答
好帮手慕糖 2019-03-01 13:53:26

你好,是的哦,这里都是类似的,需要在style标签中添加 lang="less"。

安装less的命令为:npm install less less-loader --save

同时需要修改配置文件,配置loader加载依赖,让其支持外部的less可参考如下:

打开build/webpack.base.conf.js,在module.exports 对象中添加依赖:

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

希望能帮助到你,欢迎采纳。

祝学习愉快!

提问者 小章鱼丸 2019-03-01 12:11:50

http://img1.sycdn.imooc.com//climg/5c78b0db00014b6115180710.jpg

安装less命令行怎么输入呢

好帮手慕糖 2019-03-01 10:33:29

同学你好,1、同学是学过后面的项目案例的哦,其中就有使用sass呀,sass与less是相似的,都是css的预处理语言,sass可以使用,less也是可以的哦。less的使用也是需要安装less的。

2、css的引入有两种,例:

(1)一种是直接在main.js中引入,即:如下;(引号中是路径)

import 'css/index.css'

(2)就是像我们在vue项目案例中引入sass的方式,写在style标签中,例:

<style>
    @import "../css/style.css";
</style>

希望能帮助到你,欢迎采纳。

祝学习愉快!

  • 提问者 小章鱼丸 #1
    安装less是类似这样吗?<style>标签后面加<style lang="less">吗?
    2019-03-01 12:10:58
问题已解决,确定采纳
还有疑问,暂不采纳

恭喜解决一个难题,获得1积分~

来为老师/同学的回答评分吧

0 星
热门框架Vue开发WebApp 18版
  • 参与学习           人
  • 提交作业       209    份
  • 解答问题       3299    个

本路径是通过ES6基础知识、运用Zepto、Swiper、fullPag等移动端常用工具包、以及当下流行框架Vue,结合多个实战案例,还原真实开发场景,最终实现手机端购物商城网页开发。

了解课程
请稍等 ...
意见反馈 帮助中心 APP下载
官方微信

在线咨询

领取优惠

免费试听

领取大纲

扫描二维码,添加
你的专属老师