Avec le développement croissant de la technologie front-end, le cadre de développement mobile uni-app basé sur Vue.js est également favorisé par de plus en plus de développeurs en raison de ses caractéristiques de développement hautement composants et multiplateformes. Cependant, à mesure que la taille du projet augmente, nous rencontrons parfois des problèmes lors du développement à l'aide d'uni-app. Surtout lorsque le CSS pertinent ne peut pas être trouvé lors du référencement des composants, je pense que de nombreuses personnes ont rencontré ce problème. Cet article présentera en détail la solution au problème selon lequel la référence du composant dans uni-app ne peut pas trouver le CSS.
1. Description du problème
Dans Uni-app, nous utilisons souvent des bibliothèques de composants développées par d'autres lors du développement. Cependant, lors de l'utilisation, nous constaterons que lors du référencement de composants dans d'autres bibliothèques de composants, certains styles CSS ne sont pas référencés avec succès, ce qui provoque des problèmes d'affichage des composants et donne à l'ensemble du projet un aspect très désordonné, comme le montre la figure ci-dessous.
II. .Raison
Normalement, le style d'un composant est défini dans la balise de style au sein du composant, et le code JavaScript du composant est inséré dynamiquement dans la page au moment de l'exécution. Cependant, les styles des composants tiers installés via npm ne peuvent pas être chargés dynamiquement dans la page, ce qui empêche les styles de fonctionner.
2. Solution
Étant donné que la racine du problème est que le style du composant ne peut pas être chargé dynamiquement dans la page, nous devons alors trouver un moyen de charger le style du composant tiers dans le projet. Vous pouvez utiliser les deux méthodes suivantes. Solution :
① Copiez les composants et les styles des composants tiers directement du code source dans le projet, puis référencez-les. Bien que cette méthode soit réalisable, elle augmentera la complexité du projet et la difficulté de maintenance et de mises à jour.
② Utilisez la fonction d'extension de style fournie par uni-app pour charger les styles de composants tiers dans le projet via des plug-ins.
3. Implémentation de la solution
Nous prenons ici le style de Mint UI comme exemple pour présenter comment utiliser la fonction d'extension de style fournie par uni-app pour charger les styles de composants tiers dans le projet :
Installer le plug-in de style npm install uniapp-style-loader --save-dev
config.vueconfig.js npm install uniapp-style-loader --save-dev
在项目根目录下找到vueconfig.js
文件,添加以下代码:
configureWebpack: { module: { rules: [ { test: /\.(vue|(j|t)sx?)$/, exclude: /node_modules/, use: [ { loader: 'uniapp-style-loader', options: { // 可选参数,最大改变css、less、scss数量(默认3000) maxImport: 3000, }, } ] } ] } },
安装好样式扩展插件后,我们需要将需要引入的第三方组件的样式写到一个特定的文件中,例如我们将需要引入的Mint UI的样式写到assets/style/mint-ui.scss
文件中。然后在main.js
Trouvez le fichier vueconfig.js
dans le répertoire racine du projet et ajoutez le code suivant :
// 引入样式 import '@/assets/style/mint-ui.scss';
Ajoutez les styles à introduire
rrreee
À ce stade, nous avons chargé avec succès le fichier de style Mint UI dans notre projet. Après recompilation du projet, on constate que l'effet après l'introduction du composant a été bien réparé, comme le montre la figure ci-dessous.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!