Configure sass in vue

This time I will bring you the configuration of sass in vue. What are the precautions for configuring sass in vue? The following is a practical case, let’s take a look.

1. Create a new project based on the webpack template

$ vue init webpack myvue

2. In the current directory, install the dependencies

$ cd myvue
$ npm install

3. Install the sass dependency package

npm install --save-dev sass-loader
//sass-loader依赖于node-sass
npm install --save-dev node-sass

4. Add configuration in the rules of webpack.base.conf.js in the build folder

{
 test: /\.sass$/,
 loaders: ['style', 'css', 'scss']
}

as shown below:

5. Modify the style tag

<style lang="scss">

in APP.vue 6. Then run the project

$ npm run dev

7. Modify the style of APP.vue and you can see the effect

8. Does the background of the running result turn gray, indicating that you have successfully configured sass

I believe you have mastered the method after reading the case in this article. For more exciting content, please pay attention to other related articles on the php Chinese website!

Recommended reading:

How to use PHP static binding in the project

Dynamic parameter passing in query within vue-router How to deal with

The above is the detailed content of Configure sass in vue. For more information, please follow other related articles on the PHP Chinese website!