Create a new project based on the webpack template
Install vue-cli globally
$ npm install --global vue-cli
Create a new project based on the webpack template
$ 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依赖于node-sass
npm install --save-dev node-sass
Modify the style tag
Open the Hello.vue file 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/Hello.vue
Module build failed:
h1, h2 {
^
Invalid CSS after "h1, h2 {": expected "}", was "{"
in /Users/fangyongle/my-blogger/src/components/Hello.vue (line 36, column 9)
Error message: invalid css. Because sass syntax does not use braces and semicolons.
If you like to use the syntax without curly braces, just remove the curly braces and semicolons of the css code to use the indented syntax.
If you want to use the brace syntax, that is, SCSS,
then you only need to change lang="sass" to lang="scss".
Reference sass/scss file
for example
@import "./common/scss/mixin";
<strong>Don't forget the semicolon</strong>
or you will get a similar error
Module build failed:
#app {
^
Media query expression must begin with '('
in /Users/fangyongle/elema/src/App.vue (line 35, column 1)
@ ./~/vue-style-loader!./~/css-loader!./~/vue-loader/lib/style-rewriter.js?id=data-v-0bf489db!./~/sass-loader!./~/vue-loader/lib/selector.js?type=styles&index=0!./src/App.vue 4:14-248 13:3-17:5 14:22-256
Well, using sass in a vue project is as simple as that
63 likes
Author: blacksmith master
link: https: //www.jianshu.com/p/67f52071657d
Source: Jane books
are copyrighted by the author. For commercial reprints, please contact the author for authorization, and for non-commercial reprints, please indicate the source.