Tag Archives: css

[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.

[Solved] Vue Project Error: Syntax Error: TypeError: this.getOptions is not a function

Question:

Vue project, NPM run dev, the following error:

Or

reason:

The installed sass loader version is too high. Reinstall the lower version sass-loader.

Solution:

// Uninstall the current version
npm uninstall sass-loader

// Install the specified version
npm install --save-dev [email protected]

[Solved] Binding onclick event in JS: for loop: error uncaught typeerror: cannot set properties of undefined (setting ‘classname’)

I want to achieve the following effects: click the column above to switch the content of the column below

Write the code as follows (mainly see the JS part)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .tab{
            display: inline-block;
            width: 100px;
            height: 50px;
            background-color: #aaa;
        }
        .current{
            background-color: yellow;
        }
        .content{
            display: none;
        }
    </style>
</head>
<body>
    <div class = "tab">
        <div class = "tab_list">
            <li>栏目1</li>
            <li>栏目2</li>
            <li>栏目3</li>
        </div>
        <div class = "tab_con" style="display: block;">栏目1的内容</div>
        <div class = "tab_con">栏目2的内容</div>
        <div class = "tab_con">栏目3的内容</div>
    </div>

    <script>
        var tab_list = document.querySelector(".tab_list").querySelectorAll("li");
        var tab_con = document.querySelectorAll(".tab_con");
        
        for(var i = 0;i<tab_list.length;i++){
            tab_list[i].onclick = function(){
                for(var j = 0;j<tab_list.length;j++){
                    tab_list[j].className = "tab";
                }
                tab_list[i].className = "tab red";

                for(var j = 0;j<tab_con.length;j++){
                    tab_con[j].style.display = "none";
                }
                tab_con[i].style.display = "block";

            }
        }



    </script>
</body>
</html>

The result shows an error: uncaught typeerror: cannot set properties of undefined (setting 'classname') at htmldivelement.Tab.<computed>.onclick

Baidu tested it and found the following code:

<script>
        var tab_list = document.querySelector(".tab_list").querySelectorAll("li");
        var tab_con = document.querySelectorAll(".tab_con");
        
        for(var i = 0;i<tab_list.length;i++){
            tab_list[i].onclick = function(){
                console.log("栏目" + i + "被点击了");
            }
        }



    </script>

In printing, I is 3 instead of 0, 1 and 2.

After consulting the data, we know that:

In the for loop, for each tab_List is bound to the onclick event to listen, but when the function is executed, I has ended the loop, so the printout is 3.

That is, the event listening function in the for loop needs to avoid using the loop variable I

So, if tab is involved_List [i], we can use this; If tab is involved_Con [i], that is, use I to get other elements, so we can give tab_List adds an attribute index, and then in the onclick function, we get this attribute, that is, we get the I we want

The code is as follows:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        .tab{
            width: 400px;
            margin: 100px auto;
        }
        .tab .tab_list li{
            display: inline-block;
            width: 100px;
            height: 50px;
            line-height: 50px;
            text-align: center;
            background-color: #aaa;
        }
        .tab .tab_list .current{
            background-color: yellow;
        }
        .content{
            display: none;
        }
    </style>
</head>
<body>
    <div class = "tab">
        <div class = "tab_list">
            <li>栏目1</li>
            <li>栏目2</li>
            <li>栏目3</li>
        </div>
        <div class = "tab_con" style="display: block;">栏目1的内容</div>
        <div class = "tab_con">栏目2的内容</div>
        <div class = "tab_con">栏目3的内容</div>
    </div>

    <script>
        var tab_list = document.querySelector(".tab_list").querySelectorAll("li");
        var tab_con = document.querySelectorAll(".tab_con");
        
        for(var i = 0;i<tab_list.length;i++){
            tab_list[i].setAttribute("index",i);
            tab_list[i].onclick = function(){
                var index = this.getAttribute("index");
                console.log("栏目" + index + "被点击了");
                for(var j = 0;j<tab_list.length;j++){
                    tab_list[j].className = "";
                }
                tab_list[index].className = "current";
                console.log(this.className);
                for(var j = 0;j<tab_con.length;j++){
                    tab_con[j].style.display = "none";
                }
                tab_con[index].style.display = "block";

            }
        }
    </script>
</body>
</html>