vue-cli3 packaging style misalignment

With the widespread use of Vue.js in front-end development, many developers have begun to use Vue CLI 3 to manage their Vue projects and use Webpack to package projects for production environments. However, when using Vue CLI 3 packaging, we may encounter some style misalignment problems. This article will explore how to solve these problems.

1. Check dependency versions

When packaging with Vue CLI 3 and Webpack, make sure that the versions of all dependencies are up to date and not lower than the Vue CLI requirements. You can check the Vue CLI version using the following command:

vue --version

and make sure the installed version is 3.x.x.

At the same time, when using npm or yarn to install dependencies, make sure to use the latest versions of packages, especially packages related to CSS and styles, such as sass-loader, css-loader, etc.

2. Check CSS preprocessor configuration

Vue CLI 3 uses scss as the CSS preprocessor by default. If you use another CSS preprocessor, such as less or stylus, and it is not set up correctly in the project configuration, it may cause misaligned styles. Therefore, make sure that the CSS preprocessor is configured correctly in the vue.config.js file, for example:

module.exports = {
  css: {
    loaderOptions: {
      less: {
        // 使用less的变量
        modifyVars: {
          // 或者您想使用jQuery和Bootstrap等的cdn链接
          'jquery':'jquery',
          'moment':'moment',
          'i18n':'vue-i18n',
          'bootstrap':'https://cdn.bootcss.com/bootstrap/4.0.0/css/bootstrap.min.css',
        }
      }
    }
  }
}

In this example, we have added an option called less and used modifyVars to change the Less variable Passed into our component file. By properly configuring the CSS preprocessor in Vue CLI 3, we can solve the style misalignment problem.

3. Check whether to use global styles

In the Vue project, we can use global styles to apply to components. If we use our own CSS selector in the global style, it may cause style misalignment problems, because the Vue component may be included in a DOM element that has a CSS selector defined.

To solve this problem, we can use CSS scoping to limit the style of the component. To do this, in the Vue single-file component, we can use the 30e8033e360bcffb1ce9b4703e10b64c tag to limit the CSS style to only apply to the current component.

<template>
  <div>
    // ...
  </div>
</template>

<script>
// ...
</script>

<style scoped>
  /* 在这里定义组件的样式 */
</style>

Declaring styles through scoped tags will limit their use within the current component, thereby avoiding any global style pollution or component styles being introduced by other elements.

4. Check if there are any selector priority conflicts

When packaging with Vue CLI 3, we may notice that some CSS selectors are always overridden by other selectors, This may lead to style misalignment.

This is usually caused by selector priority conflicts. In Vue components, priority is determined by the following factors:

a) Element selector< Class selector< ID selector< Inline style

b) With the same selector Rule, the one declared later overwrites the one declared first

Therefore, if we use the same selector in a Vue component with the same priority, the selector defined later will overwrite the selector defined first.

To solve this problem, we can try to use more specific CSS selectors, thereby increasing their priority and ensuring that they are not easily overridden by other selectors.

5. Check if there are any other CSS conflicts

Finally, we need to check if our Vue project conflicts with other CSS files. This may be caused by the CSS rules we use in the component conflicting with rules in other files.

To avoid this, we can use more specific selectors in CSS rules. We can also try using different CSS naming conventions, such as BEM (Block Element Modifier) ​​or ITCSS (Extensible Composable CSS Classes).

At the same time, in order to avoid conflicts, we can try to use scoped styles to fill styles into components, or use CSS in JS solutions, such as CSS Modules or Styled Components.

Summary:

The above is to solve the problem of Vue CLI 3 packaging by checking dependency versions, checking CSS preprocessor configuration, using global styles, checking selector priority conflicts and checking other CSS conflicts. Method of style dislocation. These methods can also be applied to styling issues related to Webpack packaging of other web applications. Hope these methods will help you solve similar problems during the development process.

The above is the detailed content of vue-cli3 packaging style misalignment. For more information, please follow other related articles on the PHP Chinese website!