Comment résoudre le problème selon lequel le composant référencé dans uniapp ne peut pas trouver le CSS

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

1. Nous devons d'abord installer le plug-in d'extension de style fourni par uni-app. Entrez la commande suivante dans le projet uni-app à installer :

npm install uniapp-style-loader --save-dev

config.vueconfig.js npm install uniapp-style-loader --save-dev

2. 配置.vueconfig.js

在项目根目录下找到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,
                          },
                        }
                        ]
                    }
             ]
         }
     },

3. 添加需要引入的样式

安装好样式扩展插件后，我们需要将需要引入的第三方组件的样式写到一个特定的文件中，例如我们将需要引入的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



Après l'installation le plug-in d'extension de style, nous Les styles des composants tiers qui doivent être introduits doivent être écrits dans un fichier spécifique. Par exemple, nous écrivons les styles de l'interface utilisateur Mint qui doivent être introduits dans le assets/style/mint-ui.scss. Ensuite, référencez-le dans le fichier <code>main.js :

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.
🎜🎜
🎜🎜Résumé🎜🎜IV. est détaillé Introduction de la solution au problème selon lequel les CSS ne peuvent pas être trouvés lors du référencement de composants dans uni-app. Nous pouvons utiliser la fonction d'extension de style fournie par uni-app pour charger les styles de composants tiers dans le projet via des plug-ins. Cela résoudra non seulement le problème de l'absence de styles dans les composants, mais améliorera également l'efficacité du développement du projet. 🎜

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!