What should I do if the vue project reports an error when introducing external css through import?

The solution to the error when the vue project introduces external css through import: first add the relevant content in [webpack.config.js], and then npm run dev again after adding it; then check whether there is [css-loader] in the json file 】Wait for the data and install it.

The operating environment of this tutorial: Windows 7 system, Vue version 2.9.6. This method is suitable for all brands of computers.

The vue project introduces external css through import and reports errors:

vue generates the project through webpack-simple and introduces external css and reports errors:

1. Add the following content to webpack.config.js, and then re-run npm run dev

{
        test:/\.css$/,
        loader:'style-loader!css-loader'
 },
{
        test: /.woff|.woff2|.svg|.eot|.ttf/,
        use: 'url-loader?prefix=font/&limit=10000'
 }

2. Check whether css-loader exists in the json file ,style-loader,url-loader, if it is not installed through npm install (-D), just install it.

Related learning recommendations (free): javascript learning tutorial

The above is the detailed content of What should I do if the vue project reports an error when introducing external css through import?. For more information, please follow other related articles on the PHP Chinese website!