Maison >interface Web >js tutoriel >Comment résoudre l'erreur CSS lors de la configuration de Mint-UI dans Vue

Comment résoudre l'erreur CSS lors de la configuration de Mint-UI dans Vue

小云云
小云云original
2018-01-25 10:50:202499parcourir

Après l'introduction de mint-ui dans vue2.0, une erreur CSS a toujours été signalée. Cet article présente principalement la solution au problème de la configuration de mint-ui pour signaler les erreurs CSS dans vue. Il est d'une grande valeur pratique. ceux qui en ont besoin peuvent s'y référer. Ensuite, j'espère que cela pourra aider tout le monde.

Mais css-loader style-loader a été configuré dans package.json, et css a été configuré dans webpack.config, mais cette erreur est toujours signalée. Au contraire, si vous commentez la configuration CSS dans webpack.config, il n'y aura pas d'erreur. Pourquoi ?

Parce que le répertoire dans lequel les CSS sont importés n'est pas défini dans webpack.config, car par défaut nous n'importerons les CSS que dans le répertoire /src/, mais mint-ui doit être importé dans les node_modules , alors ajoutez un élément


{
    test: /\.css$/,
    include: [
     /src/,
     '/node_modules/mint-ui/lib/'  //增加此项
    ],
    loader: "style!css"
   },

à la configuration CSS dans webpack.config Bien sûr, babelrc doit être configuré comme ceci :

.

{
 "presets": [
    "es2015","stage-0"
    ],
 "plugins": [
  ["component", [
   { 
    "libraryName": "mint-ui",
    "style": true 
   }
  ]]
 ]
}

Assurez-vous que tous les plug-ins qui convertissent es6 en es5 ont été installés

La configuration dans webpack. .config doit être complet :

Si presets:['es2015'] n'est pas configuré dans webpack.config, une erreur d'importation sera signalée :

Cette erreur est causée par l'échec de l'échappement de la syntaxe es6

Remarque : la configuration de webpack.config dépend de la version de webpack dont disposent les différentes versions. différentes méthodes de configuration. Me voici. La version webpack1.0 est utilisée.

Recommandations associées :

Introduction à l'utilisation du sélecteur dans vue mint-ui

vue mint-ui imitation adresse de livraison Taobao Jingdong Liaison à quatre niveaux

Analyse du composant Loadmore dans vue mint-ui

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

Déclaration:
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn