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解析了不渲染到页面