How to use sass-loader in vue

This article mainly explains "how to use sass-loader in vue". The content in the article is simple and clear, and it is easy to learn and understand. Please follow the editor's train of thought to study and learn how to use sass-loader in vue.

1. Using save will automatically add it in package.json.

We use npm install node-sass-save-dev and npm install node-sass-save-dev to achieve this, but there are usually errors when using this installation. We can install node-sass through Taobao npm image to solve the problem. The code is as follows:

Npm install node-sass-save-devnpm install sass-loader-save-dev

If this code still cannot be installed, we can execute the following code:

Npm install-- save node-sass-- registry= https://registry.npm.taobao.org-- disturl= https://npm.taobao.org/dist-- sass-binary-site= http://npm.taobao.org/mirrors/node-sass / / description-- registry= https://registry.npm.taobao.org Taobao npm package image-- disturl= https://npm.taobao.org/dist Taobao node source code image, some binary packages are compiled with

two。 Enter webpack.base.config.js to configure scss module-- loaders (vue1.0). The code is as follows:

{test: / / .vue $/, loader: 'vue-loader', options: {loaders: {' scss': 'stylemuri loaderloader'}

3. Open webpack.base.config.js and add module-- rules (vue2.0) to the loaders. The code is as follows:

Rules: [{test: /\ .vue $/, loader: 'vue-loader', options: vueLoaderConfig}, {test: /\ .js $/, loader:' babel-loader', include: [resolve ('src'), resolve (' test')]}, {test: /\. (png | jpe?g | gif | svg) (\?. *)? $/ Loader: 'url-loader', query: {limit: 10000, name: utils.assetsPath (' img/ [name]. [hash: 7]. [ext]')}, {test: /\ .scss $/, loaders: ["style", "css", "sass"]} {test: /\. (woff2? | eot | ttf | otf) (\?. *)? $/, loader: 'url-loader', query: {limit: 10000, name: utils.assetsPath (' fonts/ [name]. [hash: 7]. [ext]')}]}

4. If you need to use scss in the style tag of the vue file, you need to declare:

We need to use this code in vue1.0; we need to use this code to implement it in vue2.0.

Thank you for your reading, the above is the content of "how to use sass-loader in vue", after the study of this article, I believe you have a deeper understanding of how to use sass-loader in vue, and the specific use needs to be verified in practice. Here is, the editor will push for you more related knowledge points of the article, welcome to follow!