Error Messages:
Syntax Error: Error: PostCSS received undefined instead of CSS string
Solution:
Excute the command: npm install sass-loader
, and then npm run serve
will be OK!
Error Messages:
Syntax Error: Error: PostCSS received undefined instead of CSS string
Solution:
Excute the command: npm install sass-loader
, and then npm run serve
will be OK!
Check the official website document to know
The introduction path of CSS has been changed
import 'element-plus/lib/theme-chalk/index.css'
Changed to the following path
import 'element-plus/dist/index.css'
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
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
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 ```
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']
}
],
...
}
};
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)`}
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
Screenshot of error reporting
Solution:
1. Put the font file under static
2. Import font with absolute path in font.css file
3. Introduce CSS in app.vue (@ import “assets/CSS/font.CSS”)
Effect display
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.
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]
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>