Skip to content

separate the html, css, js into different files #4

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
SvenWangChina opened this issue Mar 2, 2017 · 9 comments
Open

separate the html, css, js into different files #4

SvenWangChina opened this issue Mar 2, 2017 · 9 comments

Comments

@SvenWangChina
Copy link

SvenWangChina commented Mar 2, 2017

how to separate the html, css, js into different files?
maybe like this:
// app.vue
<template src="./template.html"></template>
<style src="./style.css"></style>
<script src="./script.js"></script>

@Akryum
Copy link
Owner

Akryum commented Mar 2, 2017

This is not supported yet.

@SvenWangChina
Copy link
Author

has any other way to do this? I don't want to write all code into the single file....

@SvenWangChina
Copy link
Author

SvenWangChina commented Mar 2, 2017

or maybe like this:
// app.vue
<template>
<div>hello</div>
</template>
<style scoped lang="less">
@import './style.less'
</style>
<script lang="js">
import './script.js';
</script>

@Akryum
Copy link
Owner

Akryum commented Mar 2, 2017

That should work.

@SvenWangChina
Copy link
Author

SvenWangChina commented Mar 2, 2017

the js work fine, but less don't work, I got follow tips:
[vue-component] Error while compiling in tag <style> using lang less: Can't find handler for lang less, did you install it? -> in imports/ui/app.vue at line 6

// app.vue
<template>
<div class="container">hello world.</div>
</template>
<style lang="less">
@import 'style.less';
</style>
<script>
import './script.js';
</script>

// style.less
.container {
color: red;
}

@Akryum
Copy link
Owner

Akryum commented Mar 2, 2017

Did you install less with meteor add akryum:vue-less?

@SvenWangChina
Copy link
Author

OK, thanks.

@SvenWangChina
Copy link
Author

SvenWangChina commented Mar 2, 2017

Now, the js work fine with browser on PC and mobile, but less work fine with browser on PC(work fine need mouse hover, if mouse don't move, it don't work, also don't work when I write the css include style), but don't work on mobile.

my code:
// app.vue
<template>
<div class="container">hello world.</div>
</template>

<style scoped>
.container {
color: red;
}
</style>
<script scoped>
import './script.js';
</script>

@trusktr
Copy link

trusktr commented Sep 20, 2019

Did you install less with meteor add akryum:vue-less?

Hello @Akryum, it is not clear that this is what we have to do. I was getting the error

Can't find handler for lang 'scss', did you install it?

but perhaps the error should be something like

Can't find handler for lang 'scss', did you install it with 'meteor add akryum:vue-sass'?

I had no idea what to do, and the docs on meteor.com for using Vue don't mention it.

It would be great to update those terminal messages!

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

3 participants