vue.js - .vue 文件你们是怎么引入less sass css 独立文件的？？

问题描述

问 题

.vue 文件你们是怎么引入less sass css 独立文件的？？

webpack

            {
                test: /\.css$/,
                use: ["vue-style-loader", "css-loader"]
            },
            {
                test: /\.less$/,
                use: ["vue-style-loader", "css-loader", "less-loader"]
            },
            {
                test: /\.(scss|sass)$/,
                use: ["node-sass", "vue-style-loader", "css-loader", "sass-loader"]
            }

vue 文件

<style rel="stylesheet/sass">
    @import "./style/index.sass";
</style>

<style rel="styleheet/less">
    @f938ab: #f938ab;
    @font24: 24px;
    .box {
      color: @f938ab;
      font-size: @font24;
    }
</style>
<style>
    .color {
        color: red
    }
</style>
<template>
    <div :style="{background: '#999'}">
        <h3 class="color">你好111</h3>
        <div class="box">
            我很好呀
        </div>
    </div>
</template>

<script>

    export default {

    }
</script>

less sass 不解析，没反应.还是老样子！

解决方案

<style src="./style.css" lang="less"></style>

vue单文件组件使用预处理器看这里

这篇关于vue.js - .vue 文件你们是怎么引入less sass css 独立文件的？？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！