What to do if there is an error when compiling SASS in vue project
Jan 05, 2023 pm 04:20 PMSolution to vue project compilation sass error: 1. Use the image source "cnpm install node-sass sass-loader --save-dev" to install sass; 2. Change "sass" in "package.json" -loader" version is ""sass-loader": "^7.3.1","; 3. Use it directly in the page or use @ instead of src.
The operating environment of this tutorial: Windows 10 system, sass-loader version 7.3.1, Dell G3 computer.
What should I do if there is a sass compilation error in the vue project?
Solve the error reporting problem when vue uses Sass
Installation:
npm config set registry https://registry.npm.taobao.org/ //sass-node報錯的話,使用鏡像源cnpm install node-sass sass-loader --save-dev 再安裝一次 npm install node-sass --registry=https://registry.npm.taobao.orgChange sass-loader version in package.json
"sass-loader": "^7.3.1",
Use:
Use directly or @ instead of src in the page (@ does not need to be configured in 3.x, but needs to be configured in the webpack file in 2.x)Problem description:
The following problem is an error I encountered when using sass:*!!vue-style-loader!css-loader?{“sourceMap”:true}! ../../../../vue-loader/lib/style-compiler/index?{“vue”:t rue,”id”:”data-v-570115ee”,”scoped”:false,”hasInlineConfig”:false}!../../../../vux-loader/src/after-less-loader.js!less-loader?{“so urceMap”:true}!../../../../vux-loader/src/style-loader.js!../../../../vue-loader/lib/selector?type=style s&index=0!./index.vue in ./node_m odules/vux/src/components/alert /index.vue
Solution Such problems are generally caused by a lack of related dependencies. For this example, carefully read the error message and grasp the keywords, vue-style-loader! css-loader, which means there is a problem when css is parsed.
Therefore, the solution depends on the situation and depends on the CSS language you use, whether it is regular or less or sass.
regular, execute
npm install stylus-loader css-loader style-loader --save-dev2. If encountered in
less, execute
npm install less less-loader --save-dev3. If you encounter it in
sass, just execute
npm install sass sass-loader --save-devto install the dependencies
or
$npm intall sass-loader --save ; $npm install node-sass --save
If you don’t know, okay, you three Are you going to execute them all?.
Generally this problem will only occur when initializing the configuration. If the project is already intact, it will have been configured in package.json and can be installed directly.
Recommended learning: "vue video tutorial"
The above is the detailed content of What to do if there is an error when compiling SASS in vue project. For more information, please follow other related articles on the PHP Chinese website!

Hot AI Tools

Undress AI Tool
Undress images for free

Undresser.AI Undress
AI-powered app for creating realistic nude photos

AI Clothes Remover
Online AI tool for removing clothes from photos.

Clothoff.io
AI clothes remover

Video Face Swap
Swap faces in any video effortlessly with our completely free AI face swap tool!

Hot Article

Hot Tools

Notepad++7.3.1
Easy-to-use and free code editor

SublimeText3 Chinese version
Chinese version, very easy to use

Zend Studio 13.0.1
Powerful PHP integrated development environment

Dreamweaver CS6
Visual web development tools

SublimeText3 Mac version
God-level code editing software (SublimeText3)

To develop a complete Python Web application, follow these steps: 1. Choose the appropriate framework, such as Django or Flask. 2. Integrate databases and use ORMs such as SQLAlchemy. 3. Design the front-end and use Vue or React. 4. Perform the test, use pytest or unittest. 5. Deploy applications, use Docker and platforms such as Heroku or AWS. Through these steps, powerful and efficient web applications can be built.

Single-page applications (SPAs) can be built using Laravel and Vue.js. 1) Define API routing and controller in Laravel to process data logic. 2) Create a componentized front-end in Vue.js to realize user interface and data interaction. 3) Configure CORS and use axios for data interaction. 4) Use VueRouter to implement routing management and improve user experience.

It is not recommended to directly modify the native code when separating WordPress front and back ends, and it is more suitable for "improved separation". Use the REST API to obtain data and build a user interface using the front-end framework. Identify which functions are called through the API, which are retained on the backend, and which can be cancelled. The Headless WordPress mode allows for a more thorough separation, but it is more cost-effective and difficult to develop. Pay attention to security and performance, optimize API response speed and cache, and optimize WordPress itself. Gradually migrate functions and use version control tools to manage code.

The core of the front-end routing system is to map URLs to components. VueRouter and ReactRouter realize refresh-free page switching by listening for URL changes and loading corresponding components. The configuration methods include: 1. Nested routing, allowing the nested child components in the parent component; 2. Dynamic routing, loading different components according to URL parameters; 3. Route guard, performing logic such as permission checks before and after route switching.

ReactivitytransforminVue3aimedtosimplifyhandlingreactivedatabyautomaticallytrackingandmanagingreactivitywithoutrequiringmanualref()or.valueusage.Itsoughttoreduceboilerplateandimprovecodereadabilitybytreatingvariableslikeletandconstasautomaticallyreac

The core differences between Vue.js and React in component development are: 1) Vue.js uses template syntax and option API, while React uses JSX and functional components; 2) Vue.js uses responsive systems, React uses immutable data and virtual DOM; 3) Vue.js provides multiple life cycle hooks, while React uses more useEffect hooks.

InternationalizationandlocalizationinVueappsareprimarilyhandledusingtheVueI18nplugin.1.Installvue-i18nvianpmoryarn.2.CreatelocaleJSONfiles(e.g.,en.json,es.json)fortranslationmessages.3.Setupthei18ninstanceinmain.jswithlocaleconfigurationandmessagefil

When Vue.js handles array updates, the view is not updated because Object.defineProperty cannot directly listen to array changes. Solutions include: 1. Use the Vue.set method to modify the array index; 2. Reassign the entire array; 3. Use the rewritten mutation method of Vue to operate the array.
