Vue单文件组件不显示样式
Vue单文件组件不显示样式
提问于 2020-09-29 22:03:50
因此，我尝试在vuejs单文件组件中使用样式。我以前在node应用程序中使用过这种方法，但这次使用的是python/flask后端。(并不是说我认为这很重要)。Vue正确地呈现了组件，看起来一切正常，但它完全忽略了我的样式标记。
这是我的test.vue：
<template>
<div>
<span class="foobar">Hello {{ foo }}</span>
</div>
</template>
<script>
let my_component = {
data: function () {
return {
foo: "world"
}},
}
export default my_component
</script>
<style scoped>
.foobar {
color: red;
}
</style>下面是HTML：
<!DOCTYPE html>
<html lang="en">
<head>
<title>Test SFC Page</title>
</head>
<body>
<div id="test_component"></div>
<script src="/static/js/test.js"></script>
</body>
</html>Test.js的内容：
import Vue from 'vue'
import TestComponent from './test.vue'
new Vue({
el: "#test_component",
render: h => h(TestComponent),
})我的webpack配置是非常非常简单的。我基本上使用了和我的node/expressjs站点相同的方法，因为它起作用了，而webpack让我头疼。
const {VueLoaderPlugin} = require('vue-loader');
const config = {
module: {
rules: [
{
test: /\.vue$/,
loader: 'vue-loader',
},
{
test: /\.js$/,
loader: 'babel-loader',
},
{
test: /\.css$/,
use: [
'vue-style-loader',
'css-loader',
],
},
]
},
plugins: [
new VueLoaderPlugin(),
],
}
module.exports = config但很明显我做错了什么。在谷歌了一下(在堆栈溢出上花费了大量时间)之后，似乎暗示着webpack将为此创建一个单独的css文件，然后我必须包含它，但似乎没有人谈论你是如何做到这一点的，我在我已经工作的node/express应用程序中找不到它，所以它可能并不总是这样做？
当vue加载器遇到vue SFC中的样式部分时，它实际上对这些样式做了什么？它会以某种方式将它们通过javascript注入页面本身吗？
哦，我正在使用这个命令来运行构建：
npx webpack --display-error-details --entry ./static/test/test.js --config ./scripts/webpack.config.js -o ./build/site/static/js/test.js --mode=development最后一条信息-某些东西肯定部分工作正常，因为我的最终HTML输出包含scoped放在其中的额外数据标记。根据chrome的检查员--最终的HTML看起来像这样：
<div data-v-3d196e1c>
<span data-v-3d196e1c class="foobar">Hello world</span>
</div>最后是我的package.json：
"name": "my_app",
"version": "1.0.0",
"description": "Description Goes Here",
"main": "app.js",
"dependencies": {
"axios": "^0.20.0",
"vue": "^2.6.12",
"vue-style-loader": "^4.1.2",
"zxcvbn": "^4.4.2"
},
"devDependencies": {
"@babel/core": "^7.11.6",
"@babel/plugin-syntax-dynamic-import": "^7.8.3",
"@babel/preset-env": "^7.11.5",
"babel-loader": "^8.1.0",
"cross-env": "^7.0.2",
"css-loader": "^4.3.0",
"html-webpack-plugin": "^4.4.1",
"vue-loader": "^15.9.3",
"vue-template-compiler": "^2.6.12",
"webpack": "^4.44.1",
"webpack-cli": "^3.3.12"
},
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"repository": {
"type": "git",
"url": "git+ssh://git@gitlab.com/raphael_disanto/rpg.git"
},
"author": "RDSK",
"license": "ISC",
"bugs": {
"url": "https://gitlab.com/raphael_disanto/rpg/issues"
},
"homepage": "https://gitlab.com/raphael_disanto/rpg#readme"
}所以我完全迷路了。我不知道我是弄错了webpack，还是搞错了vue，还是介于两者之间！这是令人沮丧的，因为我在一个不同的网站上工作，我认为我这次没有做任何不同的事情……
回答 1
Stack Overflow用户
回答已采纳
发布于 2021-02-24 16:09:16
我也遇到了同样的问题，并且改变了
{
test: /\.css$/,
use: [
'vue-style-loader',
'css-loader',
],
},至
{
test: /\.css$/,
use: [
'style-loader',
'css-loader',
],
},修好了。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/64121278
复制相关文章
相似问题
腾讯云开发者
