Using SCSS/SASS for style writing in projects will undoubtedly save a lot of time developing styles. There are three solutions for how to use SCSS/SASS in vue-cli v3.0. The premise is that when using vue-cli to generate the project, CSS Pre-processors are checked, otherwise it cannot be used directly in the project.
Solution 1: Use directly in components
Using SCSS/SASS directly in components is the easiest way:
<style lang="scss" scoped> </style>
The lang option allows you to select the syntax to use: scss/sass. If you want the style to be effective globally, delete scoped.
Solution 2: Import .scss files in the component
Sometimes we might want to define a common scss/sass
We can create a .scss file in the project directory, such as some common styles that you only want to use in specific components or some scss variables.
We can use @import in our component for style import, for example:
@import '../src/static/';
Be careful not to write the path incorrectly. Moreover, the premise of this solution is that Scheme 1 is used in the import component. Otherwise, .scss cannot be compiled directly in ordinary css style sheets, and it is necessary to maintain the uniformity of style sheet formats.
Solution 3: Use global scss/sass file
If you want to define a scss style that can be used globally, you first need to create a .scss file, and then use the import command in the project to import the independent .scss file globally into the project just like importing a module.
import "./static/";
Summarize
The above is the method of using SCSS/SASS in vue-cli v3.0 introduced to you by the editor. I hope it will be helpful to you. If you have any questions, please leave me a message and the editor will reply to you in time. Thank you very much for your support for my website!