Create a new project based on webpack templates
Global installation of vue-cli
$ npm install --global vue-cli
Create a new project based on webpack templates
$ vue init webpack my-project
Installation dependencies
$ cd my-project $ npm install
In order to use sass, we need to install the sass dependency package
npm install --save-dev sass-loader //sass-loader depends on node-sassnpm install --save-dev node-sass
Modify the style tag
Open the files in the components directory under the src directory.
Then modify the style tag as follows
<style lang="sass">
Then run the project
npm run dev
The terminal displays an error, as follows:
ERROR Failed to compile with 1 errors
error in ./src/components/
Module build failed:
h1, h2 {
^
Invalid CSS after "h1, h2 {": expected "}", was "{"
in /Users/fangyongle/my-blogger/src/components/ (line 36, column 9)
Error prompt: Invalid css. Because the sass syntax does not use braces and semicolons.
If you like to use syntax without braces, just remove the braces and semicolons of the css code, and use indentation syntax.
If you want to use the syntax with braces, i.e. SCSS
Then, you just need to change lang="sass" to lang="scss".
Reference sass/scss file
Give an example
@import "./common/scss/mixin";
Don't forget the semicolon
Otherwise, a similar error will be reported
Module build failed:
#app {
^
Media query expression must begin with '('
in /Users/fangyongle/elema/src/ (line 35, column 1)
@ ./~/vue-style-loader!./~/css-loader!./~/vue-loader/lib/?id=data-v-0bf489db!./~/sass-loader!./~/vue-loader/lib/?type=styles&index=0!./src/ 4:14-248 13:3-17:5 14:22-256
OK, it's that simple to use sass in vue project
The above is all the content of this article. I hope it will be helpful to everyone's study and I hope everyone will support me more.