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

Question

.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 不解析，没反应.还是老样子！

Answer 1

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

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

Answer 2

<style lang="scss"></style>

npm install node-sass 
npm install sass-loader

Answer 3

<style lang="less"></style>

<style lang="scss"></style>

Answer 4

$ npm install sass-loader node-sass vue-style-loader 
<style lang="scss">
    @import "../../assets/css/header.scss";
</style>

Answer 5

明白了
多谢各位的回答了

Answer 6

这篇博文的解决思路值得参考：https://taoliujun.github.io/2...

This blog post is worth considering the solution:
https://taoliujun.github.io/2...