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

z9ju0rcb 于 2022-11-13 发布在 Webpack

关注(0)|答案(2)|浏览(178)

所以我尝试在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输出包含scoped放在那里的额外的data标签。根据chrome的检查器--最终的HTML看起来像这样：

<div data-v-3d196e1c>
<span data-v-3d196e1c class="foobar">Hello world</span>
</div>

最后是我的包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，或者介于两者之间！这很令人沮丧，因为我在一个不同的网站上工作，我不认为我这次做了什么不同的事情...

webpack

来源：https://stackoverflow.com/questions/64121278/vue-single-file-components-not-showing-styles

2条答案

按热度按时间

zed5wv101#

我也遇到了同样的问题

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

至

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

修好了。

赞(0）回复(0）举报 2022-11-13

olhwl3o22#

您应该使用Stephen建议，但一定要添加
npm install style-loader
然后

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

赞(0）回复(0）举报 2022-11-13

我来回答

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

2条答案

相关问题

热门标签

最新问答