gpt4 book ai didi

javascript - Vue 不应用样式类

转载 作者:行者123 更新时间:2023-11-28 00:11:25 24 4
gpt4 key购买 nike

我有使用以下 Webpack 配置构建的单文件组件:

const { VueLoaderPlugin } = require('vue-loader');

module.exports = {
module: {
rules: [
{
test: /\.vue$/,
use: 'vue-loader'
},
{
test: /\.(png|jpg|gif)$/i,
use: [
{
loader: 'url-loader',
options: {
limit: 8192
}
}
]
},
{
test: /\.css$/,
use: [
'vue-style-loader',
{
loader: 'css-loader',
options: {
modules: true,
localIdentName: '[local]_[hash:base64:8]'
}
}
]
}
]
},
plugins: [
new VueLoaderPlugin()
]

我使用 <style scoped>标记来设置我的组件的样式。这适用于标签选择器(例如 nav ),但类选择器(例如 .content )不会产生样式。 DOM 包含相关类,但生成的 dist/main.js文件只包含 content_xgKyi9qt[data-v-ab83c772]选择器,未应用,因为组件只有原始 content类。

最佳答案

结果是 vue-style-loader我使用的选项导致名称混淆。我决定从 <style scoped> 切换至 <style module>并使用 <div :class="$style.content">语法代替。

这会导致元素的类与损坏的名称相对应,并为样式提供一定程度的隔离。

关于javascript - Vue 不应用样式类,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/55375986/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com