How to solve the problem of error reporting when introducing css in vuejs

Solutions to introduce css error reports in vuejs: 1. Fill in the parsing dependencies; 2. Introduce external css files into main.js; 3. Introduce external css files into APP.Vue.

The operating environment of this article: windows7 system, vue2.5.17 version, DELL G3 computer.

How to solve the problem of error reporting when introducing css into vuejs? Some pitfalls of VueJS introducing css or less files

When we do Vue webpack, we will inevitably introduce various public css style files, so how do we introduce them? What are the pitfalls when introducing it?

First of all, when introducing public styles, we use the AMD method to introduce them in "main.js", that is,

require('./assets/stylus/index.styl'); 或者： import './assets/stylus/index.styl'

At this time, we will throw an error because we did not write Parsed dependencies, webpack doesn't know how to parse

At this time, we need to fill in the dependencies,

import '!style-loader!css-loader! stylus-loader!./assets/stylus/index.styl'

Everything will be fine, you can also start importing css files

Of course, before proceeding with the above steps, you need to First install a few loaders==>>

npm install style-loader --save-dev npm install css-loader --save-dev npm install stylus-loader --save-dev

At the same time in webpack.base.config.js ====>>>

At this time you can introduce the css file;

Attached are a few diagrams:

1===》Introduce external css files into main.js:

2===》Introduce external css files into APP.Vue:

Related recommendations:《vue.js tutorial》《The latest 5 vue.js video tutorial selections》

The above is the detailed content of How to solve the problem of error reporting when introducing css in vuejs. For more information, please follow other related articles on the PHP Chinese website!