How to correctly include the style of the component?

L

l4m3r2018-09-30 19:11:10

Vue.js

l4m3r, 2018-09-30 19:11:10

I'm learning vue for the first day. I can not understand. I want to include the element-ui library.
Simple HelloWorld:

<!doctype html>
<html lang="{{ app()->getLocale() }}">
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <meta name="csrf-token" content="{{ csrf_token() }}">
        <link type="text/css" href="{{ asset('css/app.css') }}">
        <title>{{ config('app.name') }}</title>
    </head>
    <body>
        <div id="app">
            <el-button @click="visible = true">Button</el-button>
            <el-dialog :visible.sync="visible" title="Hello world">
                <p>Try Element</p>
            </el-dialog>
        </div>
        <script src="{{ asset('js/app.js') }}"></script>
    </body>
</html>

If you explicitly set "import 'element-ui/lib/theme-chalk/index.css'" then everything works.

require('./bootstrap');

import Vue from 'vue';
import 'element-ui/lib/theme-chalk/index.css';
import Element from 'element-ui';

Vue.use(Element);

const app = new Vue({
    el: '#app',
    data() {
        return {
            visible: false
        }
    },
    mounted() {
        console.log('test');
    }
});

But is it right to do so, to include style in js? I removed import css from app.js.
Then, I add the line import '~element-ui/lib/theme-chalk/index'; to the beginning of app.scss; Everything compiles, but the styles are not applied. How can this be?
A couple more follow-up questions:
1) What is the correct way to include component styles? Write style tag to .vue / import from .vue / load with webpaw separately in app.scss?
2) Is there any difference between import (default) and require when using webpack (laravel mix)?

Reply

Answer the question

In order to leave comments, you need to log in

1 answer(s)

K

Klein Maximus, 2018-10-04
@l4m3r

You need to import styles in the same place where you connect the library itself. There is no point in spreading this into different parts of the code. If the .css extensions in the js code of the main program bother your eyes, then you can make a separate module that will connect both the Element-ui library itself and styles, and connect this module to your application. In general, the documentation describes in some detail how to connect styles, and why it was done that way.
By the way, what is app.scss, and how do you connect it?
These are different module systems - more about this (and not only) here . I advise you to study all the materials from this textbook - you will have much fewer questions :)