How to solve the problem that the referenced component in uniapp cannot find css

With the increasing development of front-end technology, the mobile development framework uni-app based on Vue.js is also favored by more and more developers because of its highly componentized and cross-platform development characteristics. However, as the size of the project increases, sometimes we encounter some problems during development using uni-app. Especially when the relevant css cannot be found when referencing components, I believe many people have encountered this problem. This article will introduce in detail the solution to the problem that the component reference in uni-app cannot find css.

1. Problem description

In uni-app, we often use component libraries developed by others when developing. However, during use, we will find that when referencing components in other component libraries, some CSS styles are not successfully referenced, causing problems with the display of the components and making the entire project look very uncoordinated, as shown in the figure below.

2. Problem Analysis

1. Reason

Normally, the style of a component is defined in the style tag within the component, and the JavaScript code of the component is runtime will be dynamically inserted into the page. However, the styles in third-party components installed through npm cannot be dynamically loaded into the page, causing the styles to not work.

2. Solution

Since the root of the problem is that the style of the component cannot be dynamically loaded into the page, then we need to find a way to load the style of the third-party component into the project. We can solve it in the following two ways:

① Copy the components and styles of the third-party components directly from the source code to the project, and then reference them. Although this method is feasible, it will increase the complexity of the project and the difficulty of maintenance and updates.

② Use the style extension function provided by uni-app to load the styles of third-party components into the project through plug-ins.

3. Solution Implementation

Here we take the style of Mint UI as an example to introduce how to use the style extension function provided by uni-app to load the styles of third-party components into the project:

1. Install style plug-in

We need to first install the style extension plug-in provided by uni-app. Enter the following command in the uni-app project to install:

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

2. Configuration.vueconfig.js

Find the vueconfig.js file in the project root directory and add the following code:

configureWebpack: {
        module: {
            rules: [    
                 {
                 test: /\.(vue|(j|t)sx?)$/,
                 exclude: /node_modules/,   
                    use: [
                        {
                          loader: 'uniapp-style-loader',
                          options: {
                             // 可选参数，最大改变css、less、scss数量(默认3000)
                            maxImport: 3000,
                          },
                        }
                        ]
                    }
             ]
         }
     },

3. Add the styles that need to be introduced

After installing the style extension plug-in, we need to write the styles of the third-party components that need to be introduced into a specific file. For example, we write the styles of the Mint UI that need to be introduced to assets/style/mint -ui.scss file. Then reference it in the main.js file:

// 引入样式
import '@/assets/style/mint-ui.scss';

At this point, we have successfully loaded the Mint UI style file into our project. After recompiling the project, it is found that the effect after introducing the component has been well repaired, as shown in the figure below.

4. Summary

This article details the solution to the problem that css cannot be found when referencing components in uni-app. We can use the style extension function provided by uni-app to load the styles of third-party components into the project through plug-ins. This will not only solve the problem of missing styles in components, but also improve the efficiency of project development.

The above is the detailed content of How to solve the problem that the referenced component in uniapp cannot find css. For more information, please follow other related articles on the PHP Chinese website!