Блог

У меня есть приложение MPA, где vue.js используется как часть приложения. У меня есть очень простой тест, настроенный здесь:

1. соответствующие части моего шаблона

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

2. 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')
 

3. компонент

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

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

Таким образом, приведенный выше код отлично отображается в моем интерфейсе. В итоге я получаю дополнительный div экземпляр, внутри которого напечатано «Привет, молодец».

Однако, когда я добавляю css в тег style:

 <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?vueamp;type=styleamp;index=0amp;id=2711cf65amp;scoped=trueamp;lang=cssamp;'
    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 файл, чтобы убедиться, что загрузчик стилей работает, поскольку я видел еще один вопрос SO с аналогичной проблемой, который решил ее таким образом. Однако у меня это не сработало.

Обновление 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?vueamp;type=templateamp;id=2711cf65amp; */ 
        "./src/BasketCheckout.vue?vueamp;type=templateamp;id=2711cf65amp;"
    );
    /* harmony import */ 
    var _BasketCheckout_vue_vue_type_script_lang_js___WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(
        /*! ./BasketCheckout.vue?vueamp;type=scriptamp;lang=jsamp; */ 
        "./src/BasketCheckout.vue?vueamp;type=scriptamp;lang=jsamp;"
    );
    Object(function webpackMissingModule() { 
        var e = new Error(
            "Cannot find module './BasketCheckout.vue?vueamp;type=styleamp;index=0amp;lang=cssamp;'"
        ); 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?"
);
 

Правила CSS с ограниченной областью действия применяются только к текущему компоненту (и корневым узлам его дочерних компонентов).

Вы монтируете свой экземпляр Vue в #app-basket-checkout, который уже находится внутри <body> элемента.

Вы можете создавать стили <body> , но делайте это с помощью глобальной таблицы стилей , которая импортируется в ваш app.js , а не подкомпонент.

Кроме того, вы можете применить стиль на основе класса к узлу низкого уровня в вашем экземпляре Vue и, вероятно, предоставить желаемые стили.