Question

因此，我尝试在vuejs单个文件组件中使用样式。我以前曾在节点应用程序中进行过此操作，但这与python / flask后端有关。（并不是我认为这很重要）。 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输出包含范围内放置的额外数据标签。根据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或两者之间的某个地方弄错了！令人沮丧的是，因为我在另一个网站上进行了这项工作，而这次我没有做任何不同的事情……

Answer 1

我遇到了完全相同的问题，并且正在更改

        {
            test: /\.css$/,
            use: [
                'vue-style-loader',
                'css-loader',
            ],
        },

到

        {
            test: /\.css$/,
            use: [
                'style-loader',
                'css-loader',
            ],
        },

修复它。

Vue单个文件组件未显示样式

1 个答案: