Tag Archives: css

[Solved] Vue Import swiper.css Error: Module not found…

The error information is as follows: 

Module not found: Error: Package path ./swiper.css is not exported from package C:\Users\yoyang\Desktop\vue\test2022\node_modules\swiper (see exports field in C:\Users\yoyang\Desktop\vue\test2022\node_modules\swiper\package.json)

 

The reason for the problem is that vue2 has poor compatibility with the latest version of swipe. You only need to reinstall the old version of swipe, such as [email protected]

Solution:

1. Download the old version of swiper

npm i [email protected] --save

2. Restart project

npm run serve

3. Import swiper

import Swiper from 'swiper/bundle'
import 'swiper/swiper-bundle.css'

In this way, the wiper component can be used normally

<template>
  <div class="swiper-container yang">
    <div class="swiper-wrapper">
      <slot></slot>
    </div>
    <div class="swiper-pagination"></div>
  </div>
</template>

<script>
import Swiper from 'swiper'
import 'swiper/swiper.min.css'

export default {
  mounted () {
    new Swiper('.yang', {
      pagination: {
        el: '.swiper-pagination'
      },
      loop: this.loop,
      autoplay: {
        delay: 2500,
        disableOnInteraction: false
      }
    })
  }
}
</script>

[Solved] arco design vite-plugin-style-import Load menu-item error: Internal server error…

According to Arco design tutorial on the official website

Load components on demand by manual import

Solution:

Change the official website example to the following. The exclude array is the component name without CSS. If you are not clear about the component name, you can print console.log of the resolveStyle function:

createStyleImportPlugin({
      libs: [
        {
          libraryName: '@arco-design/web-vue',
          esModule: true,
          resolveStyle: (name) => {
            const exclude = ['menu-item']
            if (exclude.includes(name)) return ''
            // css
            return `@arco-design/web-vue/es/${name}/style/css.js`
          },
        },
      ],
    }),

Error message

 [vite] Internal server error: Failed to resolve import "D:/Programing/WebstormProjects/cow-Low-code/node_modules/@arco-design/web-vue/es/menu-item/style/css.js" from "src\views\HomeView.vue". Does the file exist?

[Solved] vite package Error: globalThis is not defined

Problem:
browser version 65
globalthis requires chrome 71 or above

vite + vue3.0 after the project is packaged, the browser prompts globalthis is not defined.

How to Solve:
Modify vite.config.js
Add plugin @vitejs/plugin-legacy

import legacy from '@vitejs/plugin-legacy'

export default defineConfig({
	plugins: [
		legacy({
			targets: ['Chrome 63'],
			additionalLegacyPolyfills: ['regenerator-runtime/runtime'],
			modernPolyfills: true
		})
	],
	build:{
   		target:'es2015'
	}
})

Just repack it

[Solved] Syntax Error: Error: Node Sass does not yet support your current environment:

Error Messages:

 ERROR  Failed to compile with 1 error                                               AM11:47:18
error  in ./src/assets/styles/fat.scss
Syntax Error: Error: Node Sass does not yet support your current environment: Windows 64-bit withFor more information on which environments are supported please see:
https://github.com/sass/node-sass/releases/tag/v4.14.1

@ ./src/assets/styles/fat.scss 4:14-291 15:3-20:5 16:22-299
@ ./src/main.js
@ multi ./node_modules/[email protected]@webpack-dev-server/client?http://192.168.30.251:80&sockPath=/sockjs-node (webpack)/hot/dev-server.js ./src/main.js

Solution:

 The node scss version does not match the current environment and needs to be uninstalled and reinstalled
Uninstall command: npm uninstall –save node-sass
Install command: npm install –save node-sass

[Solved] hugo Use meme Theme Error: Error: Error building site: TOCSS: failed to transform “en/styles/main-rendered.scss“

Error when using meme theme:

Error: Error building site: TOCSS: failed to transform "en/styles/main-rendered.scss" (text/x-scss): SCSS processing failed: file "stdin", line 223, col 17: Invalid CSS after "$fofPoster: url(": expected expression (e.g. 1px, bold), was "<no value>);"

Solution:
① install the extended version Hugo. That is, execute with extended
② in the name

rm config.toml && cp themes/meme/config-examples/en/config.toml config.toml	```

How to Solve Vue3 using deep syntax Error

For more information, please refer to my blog

Error reporting performance

Solution:

Adds the following configuration in .stylelintrc.js:

/**
 * @module .stylelintrc
 * @author: huoyou
 * @description: css
 */
module.exports = {
  rules: {
    ...
    'selector-pseudo-class-no-unknown': [
      true,
      {
        ignorePseudoClasses: ['deep']
      }
    ],
    ...
  }
};

[Solved] Vue binding dynamic inline style Error: transform:rotate()

reason:

V-bind or ‘:’ is followed by the written JS code, which is written in the form of key value pairs. The key is the CSS style attribute name of the tag, and the key is the attribute value. The key value must be a string or a variable (provided that the variable must be declared in the data first): style = “{transform: rotate()}” this writing browser calls rotate as a function rotate(), so an error will be reported

Solution:

//String mode
:style="{transform: 'rotate(60deg)'} 
//Variable form
:style="{transform: `rotate(${Variable}deg)`}

Module not found: Error: Can‘t resolve ‘sass-loader‘ in…

sass-loader！

Failed to compile.

./src/main.js
Module not found: Error: Can't resolve 'sass-loader' in 'E:\study_software\JetBrains\WebStorm2021\WebstormProjects\vue-element-admin-master'


npm install sass-loader sass webpack --save-dev
npm install --save-dev node-sass
or
cnpm install node-sass --save

sass-loader: https://www.npmjs.com/package/sass-loader

[Solved] Vue package error: Syntax Error: Error: Cannot find module ‘mozjpeg’ 

Syntax Error: Error: Cannot find module 'mozjpeg'

The main reason is that some dependencies of image webpack loader are not installed successfully, which makes the processing of pictures report errors

Attempting to install dependencies:

npm install mozjpeg

report errors:

connect ECONNREFUSED 0.0.0.0:443
mozjpeg pre-build test failed

You can solve this problem by modifying hosts.

Modify hosts for MAC system

https://github.com/googlehosts/hosts
Go to this website to download files
open the terminal, enter open/etc
and paste the hosts into the etc folder to replace the original hosts file.

The reinstallation was successful and the packaging was successful.