Изучаю vue первый день. Не могу разобраться. Хочу подключить библиотеку element-ui.
Простой 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>
Если задать явно "import 'element-ui/lib/theme-chalk/index.css'" то всё работает.
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');
}
});
Но разве так правильно делать, стиль в js подключать? Я убрал import css из app.js.
Потом, добавляю в начало app.scss строку import '~element-ui/lib/theme-chalk/index'; Всё компилируется, но стили не применяются. Как такое может быть?
Ещё пара вопросов вдогонку:
1) Как вообще правильно подключать стили компонента? Писать style тег во .vue / импортировать из .vue / подгружать вебпапом отдельно в app.scss?
2) Есть ли какая-то разница между import (default) и require при использовании webpack (laravel mix)?
