Welcome to OStack Knowledge Sharing Community for programmer and developer-Open, Learning and Share
Welcome To Ask or Share your Answers For Others

Categories

0 votes
4.4k views
in Technique[技术] by (71.8m points)

Vue 中样式不生效

  • 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>

实际渲染效果
image.png


问题:如何让样式生效?


与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
Welcome To Ask or Share your Answers For Others

1 Answer

0 votes
by (71.8m points)

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

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

2 种解决方案

  1. 使用 style-loader 替换 vue-style-loader
  2. 关闭 css-loaderesModule

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

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


与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
Welcome to OStack Knowledge Sharing Community for programmer and developer-Open, Learning and Share
Click Here to Ask a Question

...