In Vue.js, each Vue file is a component that, in the. vue file, can be written together with templates, scripts, and styles to facilitate the organization of the entire component. When using Template,script, when writing CSS style, have been particularly smooth, but when I want to use sass to preprocess CSS, in style under the use of lang= ' sass ' has been an error.
This is the case in the. Vue.
<template >
<div class= "haha" >
<p>
keith + {{}}
</p>
</div >
</template>
<script>
Export Default {
data () {return
{message
: ' Hello World '}}
</script>
<style lang = ' sass ' scoped>
</style>
If you run Webpak, you will get an error.
I believe many people, like me, will report this error in the installation Node-sass. After an afternoon toss, finally find out why.
Workaround: Locate the Node-sass file under Node_modules, enter, and if there is no Vendor folder, create an empty folder named Vendor. Run Webpack. Then there is the error.
The error shows that a. node file could not be found under the Vendor folder, then locate the appropriate file under the release page of the Node-sass official website and download it to the appropriate file directory. Portal: Node-sass official website Remember to download the appropriate version. When finished, run Webpack ... Waiting in. If successful, congratulations, you can use the sass in the Vue file to preprocess CSS. If there is no success, the error will still be made. The error message is as follows.
Tip Let's rebuid node-sass again because we've added a file back in the first few steps, and Webpack didn't do it at this point. So, open cmd, run
CNPM rebuild Node-sass--save-dev executes webpack.
Compilation succeeded.
Here is a record of the problems you are experiencing in learning webpack, and hope that other friends who have the same problem can avoid it.