Vue 中样式不生效

Question

• webpack 配置

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

• vue 文件内容

<template>
    <div class="blog-header">Header</div>
</template>

<script>
export default {
    setup() {
        return {};
    },
};
</script>

<style lang="less">
.blog-header {
    border-top: 5px solid #ccc;
    color: red;
}
</style>

---

实际渲染效果

---

问题：如何让样式生效？

Answer 1

问题已经排查完毕，具体原因有 2 方面。

• vue-style-loader 已经过时
• css-loader 从 v4 版本默认开启 esModule

2 种解决方案

1. 使用 style-loader 替换 vue-style-loader

2. 关闭 css-loader 的 esModule

   {
       loader: 'css-loader',
       options: {
           esModule: false
       }
   }

参考链接：vue-loader网站手动配置里vue-style-loader版本过低，造成css解析了不渲染到页面

Answer 2

test: /.less$/,

匹配的是文件扩展名为 .less的样式，而你的样式是文件内的，建议你把

<style lang="less">

改成

<style>

试试，因为你也没有用到 less的任务语法。

Answer 3

//不需要vue-style-loader.新版本的这个loader会集成在vue-loader中。把css也配上试一下
{
            test: /\.css|\.less$/,
            use: [
                    {
                        loader: "css-loader"
                    }, {
                        loader: "less-loader", options: {
                            strictMath: true,
                            noIeCompat: true
                        }
                    }
            ]

        },