向<style>标记添加css时vue mpa无法编译

Question

我有一个MPA应用程序，其中vue.js作为应用程序的一部分。我有一个非常简单的测试设置，在这里：

1. 模板的相关部分

....
<div id='app-basket-checkout'>
    <h1>Better Be Here</h1>
</div>
....

1. pageBasketCheckout.js (本质上是我的app.js)

import Vue from 'vue'
import AppBasketCheckout from './BasketCheckout.vue'
import './dummyScss.css'

Vue.config.productionTip = false

new Vue({
    render: h => h(AppBasketCheckout)
}).$mount('#app-basket-checkout')

1. component

<template>
<div id="app-basket-checkout">
    {{msg}}
</div>
</template>
<script>
export default {
    name: 'AppBasketCheckout',
    components: {

    },
    data() {
        return {
            msg: 'Hello'
        }
    }
}
</script>
<style scoped>
</style>

因此，上面的代码在我的前端呈现得很好。最后，我得到了一个额外的div，里面打印了hello，做得很好。

但是，当我将css添加到样式标记时：

<template>
<div id="app-basket-checkout">
    {{msg}}
</div>
</template>
<script>
export default {
    name: 'AppBasketCheckout',
    components: {

    },
    data() {
        return {
            msg: 'Hello'
        }
    }
}
</script>
<style scoped>
    body {
        font-family: Arial, Helvetica, sans-serif;
        line-height: 1.4;
    }
</style>

这将在chrome中产生此错误：

Uncaught Error: Cannot find module './BasketCheckout.vue?vue&type=style&index=0&id=2711cf65&scoped=true&lang=css&'
    at webpackMissingModule (VM45512 BasketCheckout.vue:4)
    at eval (VM45512 BasketCheckout.vue:4)
    at Module../src/BasketCheckout.vue (pageBasketCheckout.bundle.js:40)
    at __webpack_require__ (index.bundle.js:4312)
    at eval (pageBasketCheckout.js:3)
    at Module../src/pageBasketCheckout.js (pageBasketCheckout.bundle.js:29)
    at __webpack_require__ (index.bundle.js:4312)
    at checkDeferredModulesImpl (index.bundle.js:4453)
    at webpackJsonpCallback (index.bundle.js:4435)
    at pageBasketCheckout.bundle.js:9

同样，此错误仅在向组件中添加css时才会发生。这是我的webpack.config.js

const path = require('path');
const webpack = require('webpack')
const glob = require('glob')
const VueLoaderPlugin = require('vue-loader/lib/plugin')

module.exports = {
    watch: true,
    context: path.resolve(__dirname, 'uniquesite/uniquesite'),
    mode: 'development',
    entry: {
        index: {
            import: ['@babel/polyfill', './src/index.js'],
            // dependOn: ['babel'],
        },
        pageProductDetails: {
            import: ['@babel/polyfill', './src/pageProductDetails.js'],
            dependOn: ['index'],
        },
        pageBasketCheckout: {
            import: ['@babel/polyfill', './src/dummyScss.scss', './src/pageBasketCheckout.js'],
            dependOn: ['index']
        }
    },
    output: {
        filename: '[name].bundle.js',
        path: path.resolve(__dirname, 'uniquesite/uniquesite/static/uniquesite/js/'),
    },
    plugins: [
        new VueLoaderPlugin()
    ],
    resolve: {
        alias: {
            jquery: "jquery/src/jquery",
            'jquery-ui': "jquery-ui-dist/jquery-ui.js",
            boostrap: "bootstrap/dist/js/bootstrap.bundle.js"
        }
    },
    module: {
        rules: [{
            test: /\.vue$/,
            loader: 'vue-loader'
        },{
            test: /\.css$/,
            use: [
                'vue-style-loader',
                'css-loader'
            ]
        },
        {
            test: /\.m?js$/,
            exclude: /(node_modules|bower_components)/,
            use: {
                loader: 'babel-loader',
                options: {
                    presets: ['@babel/preset-env']
                }
            }
        }
        ]
    }
};

您将注意到，我还尝试导入一个虚拟.css文件，以确保样式加载程序工作正常，因为我又看到了一个这样的问题，类似的问题解决了这个问题。不过，这对我没有用。

更新1

我目前的想法是，这个问题必须发生在VueLoaderPlugin。该插件可用于将脚本拆分为模板、逻辑和样式的不同部分。看起来，这种风格并没有真正地融入到包中。见下文。

"use strict";
eval(
    "__webpack_require__.r(__webpack_exports__);
    /* harmony import */ 
    var _BasketCheckout_vue_vue_type_template_id_2711cf65___WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(
        /*! ./BasketCheckout.vue?vue&type=template&id=2711cf65& */ 
        \"./src/BasketCheckout.vue?vue&type=template&id=2711cf65&\"
    );
    /* harmony import */ 
    var _BasketCheckout_vue_vue_type_script_lang_js___WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(
        /*! ./BasketCheckout.vue?vue&type=script&lang=js& */ 
        \"./src/BasketCheckout.vue?vue&type=script&lang=js&\"
    );
    Object(function webpackMissingModule() { 
        var e = new Error(
            \"Cannot find module './BasketCheckout.vue?vue&type=style&index=0&lang=css&'\"
        ); e.code = 'MODULE_NOT_FOUND'; 
        throw e; 
    }());
    /* harmony import */ 
    var _node_modules_vue_loader_lib_runtime_componentNormalizer_js__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(
        /*! !../../../node_modules/vue-loader/lib/runtime/componentNormalizer.js */ 
        \"../../node_modules/vue-loader/lib/runtime/componentNormalizer.js\"
    );
    /* normalize component */
    var component = (
        0,_node_modules_vue_loader_lib_runtime_componentNormalizer_js__WEBPACK_IMPORTED_MODULE_3__.default
    )(
        _BasketCheckout_vue_vue_type_script_lang_js___WEBPACK_IMPORTED_MODULE_1__.default,
        _BasketCheckout_vue_vue_type_template_id_2711cf65___WEBPACK_IMPORTED_MODULE_0__.render,
        _BasketCheckout_vue_vue_type_template_id_2711cf65___WEBPACK_IMPORTED_MODULE_0__.staticRenderFns,
        false,
        null,
        null,
        null)

    /* hot reload */
    if (false) { var api; }
    component.options.__file = \"src/BasketCheckout.vue\"
    /* harmony default export */ 
    __webpack_exports__[\"default\"] = (component.exports);

    //# sourceURL=webpack:///./src/BasketCheckout.vue?"
);

Answer 1

作用域CSS规则仅适用于当前组件(及其子组件的根节点)。

您正在#app-basket-checkout，上挂载Vue实例，该实例已经在<body>元素中。

您可以使用<body>样式，但可以使用在app.js中导入的全局样式表，而不是子组件。

或者，您可以在Vue实例中的低级节点上应用基于类的样式，并可能交付所需的样式。