Home Web Front-end JS Tutorial Solve the loader problem of projects created by vue-cli

Solve the loader problem of projects created by vue-cli

May 30, 2018 pm 04:04 PM
vue-cli Purpose

Below I will share with you an article that solves the loader problem of vue-cli creation project. It has a good reference value and I hope it will be helpful to everyone.

When using the vue-cli project to create a project, when using pre-compiled css languages ​​such as sass, you do not need to configure it in the config, you only need to install the corresponding loader in the project.

For example:

1. Use sass in the project

$ npm i node-sass -D
$ npm i sass-loader -D
Copy after login

2. When using vuex, even if vux and vux-loader are installed and vux components are used in the project, the project will not start and the error will be as follows:

These dependencies were not found:

* !!vue-style-loader!css-loader?{"minimize":false,"sourceMap":false}!../../../../vue-loader/lib/style-compiler/index?{"vue":true,"id":"da
ta-v-28d8bf8a","scoped":false,"hasInlineConfig":false}!../../../../vux-loader/src/after-less-loader.js!less-loader?{"sourceMap":false}!..
/../../../vux-loader/src/style-loader.js!../../../../vue-loader/lib/selector?type=styles&index=0!./index.vue in ./~/vux/src/components/ce
ll/index.vue
* !!vue-style-loader!css-loader?{"minimize":false,"sourceMap":false}!../../../../vue-loader/lib/style-compiler/index?{"vue":true,"id":"da
ta-v-76475f48","scoped":false,"hasInlineConfig":false}!../../../../vux-loader/src/after-less-loader.js!less-loader?{"sourceMap":false}!..
/../../../vux-loader/src/style-loader.js!../../../../vue-loader/lib/selector?type=styles&index=0!./index.vue in ./~/vux/src/components/gr
oup/index.vue

To install them, you can run: npm install --save !!vue-style-loader!css-loader?{"minimize":false,"sourceMap":false}!../../../../vue-loade
r/lib/style-compiler/index?{"vue":true,"id":"data-v-28d8bf8a","scoped":false,"hasInlineConfig":false}!../../../../vux-loader/src/after-le
ss-loader.js!less-loader?{"sourceMap":false}!../../../../vux-loader/src/style-loader.js!../../../../vue-loader/lib/selector?type=styles&i
ndex=0!./index.vue !!vue-style-loader!css-loader?{"minimize":false,"sourceMap":false}!../../../../vue-loader/lib/style-compiler/index?{"v
ue":true,"id":"data-v-76475f48","scoped":false,"hasInlineConfig":false}!../../../../vux-loader/src/after-less-loader.js!less-loader?{"sou
rceMap":false}!../../../../vux-loader/src/style-loader.js!../../../../vue-loader/lib/selector?type=styles&index=0!./index.vue
> Listening at http://localhost:8080
Copy after login

At a glance, I can confirm that there is a problem with the loader, but I have installed the dependencies for sass compilation and still cannot solve the error.

Later I checked the vux package and found that the component used less, so I installed the less dependency to solve the problem.

The above is what I compiled for everyone. I hope it will be helpful to everyone in the future.

Related articles:

Angular study notes: examples of integrating third-party UI frameworks and controls

Node.js implementation registration Example of how to activate the email function

Detailed explanation of Webpack’s babel-loader file preprocessor

The above is the detailed content of Solve the loader problem of projects created by vue-cli. For more information, please follow other related articles on the PHP Chinese website!

Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Hot AI Tools

Undresser.AI Undress

Undresser.AI Undress

AI-powered app for creating realistic nude photos

AI Clothes Remover

AI Clothes Remover

Online AI tool for removing clothes from photos.

Undress AI Tool

Undress AI Tool

Undress images for free

Clothoff.io

Clothoff.io

AI clothes remover

Video Face Swap

Video Face Swap

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

Hot Tools

Notepad++7.3.1

Notepad++7.3.1

Easy-to-use and free code editor

SublimeText3 Chinese version

SublimeText3 Chinese version

Chinese version, very easy to use

Zend Studio 13.0.1

Zend Studio 13.0.1

Powerful PHP integrated development environment

Dreamweaver CS6

Dreamweaver CS6

Visual web development tools

SublimeText3 Mac version

SublimeText3 Mac version

God-level code editing software (SublimeText3)

What are the benefits of Douyin account matrix? What is the purpose of making a Douyin account matrix? What are the benefits of Douyin account matrix? What is the purpose of making a Douyin account matrix? Mar 27, 2024 pm 02:31 PM

With the popularity of Douyin, more and more individuals and companies have begun to pay attention to the Douyin account matrix. The Douyin account matrix refers to the creation of multiple related accounts to form an organic whole to achieve the purpose of expanding brand influence and improving user stickiness. So, what are the benefits of Douyin account matrix? What is the purpose of making a Douyin account matrix? This article explores these issues in detail. 1. What are the benefits of Douyin account matrix? Increase brand exposure: By creating multiple Douyin accounts, brand information can reach more potential users, helping to increase the brand's visibility and reputation. Improve content exposure: Using Douyin’s recommendation algorithm to publish content through multiple accounts can increase the exposure opportunities of brands and products and improve their visibility on the platform. 3. Achieve precision

Vue-cli3.0 scaffolding to create Vue project steps and process Vue-cli3.0 scaffolding to create Vue project steps and process Jun 09, 2023 pm 04:08 PM

Vue-cli3.0 is a new scaffolding tool based on Vue.js. It can help us quickly create a Vue project and provides many convenient tools and configurations. Below we will introduce step by step the steps and process of creating a project using Vue-cli3.0. To install Vue-cli3.0, you first need to install Vue-cli3.0 globally. You can install it through npm: npminstall-g@vue/cli

The use of Vue-cli scaffolding and its plug-in recommendations The use of Vue-cli scaffolding and its plug-in recommendations Jun 09, 2023 pm 04:11 PM

Vue-cli is a scaffolding tool officially provided by Vue.js to build Vue projects. By using Vue-cli, you can quickly build the basic skeleton of a Vue project, allowing developers to focus on the implementation of business logic without spending a lot of time. To configure the basic environment of the project. This article will introduce the basic usage of Vue-cli and commonly used plug-in recommendations, aiming to provide a guide to the use of Vue-cli for beginners. 1. Basic usage of Vue-cli Install Vue-cli

A detailed guide to using Vue-cli in Vue A detailed guide to using Vue-cli in Vue Jun 26, 2023 am 08:03 AM

Vue is a popular front-end framework favored by many developers for its flexibility and ease of use. In order to better develop Vue applications, the Vue team has developed a powerful tool-Vue-cli, which makes it easier to develop Vue applications. This article will introduce you to the use of Vue-cli in detail. 1. Install Vue-cli Before using Vue-cli, you need to install it first. First, you need to make sure you have Node.js installed. Then, install Vue-c using npm

Vue-cli scaffolding tool usage and project configuration instructions Vue-cli scaffolding tool usage and project configuration instructions Jun 09, 2023 pm 04:05 PM

Instructions for using Vue-cli scaffolding tools and project configuration. With the continuous development of front-end technology, front-end frameworks are attracting more and more attention from developers. As a leader in front-end frameworks, Vue.js has been widely used in the development of various web applications. Vue-cli is a command line-based scaffolding officially provided by Vue.js. It can help developers quickly initialize the Vue.js project structure, allowing us to focus more on business development. This article will introduce the installation and installation of Vue-cli

What is the main purpose of establishing a computer network What is the main purpose of establishing a computer network Dec 09, 2020 pm 04:34 PM

The main purpose of establishing a computer network is to realize the sharing of computer resources; resource sharing refers to the simultaneous use of hardware and software resources by multiple computers or multiple users in the same computer in the network. To achieve resource sharing, it must be coordinated by the operating system manage.

How to deploy nginx to access projects built by vue-cli How to deploy nginx to access projects built by vue-cli May 15, 2023 pm 10:25 PM

The specific method is as follows: 1. Create the backend server object upstreammixVueServer{serverbaidu.com;#This is your own server domain name} 2. Create the access port and reverse proxy rule server{listen8082;server_namelocalhost;location/{rootE:/mix_vue/dist;# Locate the directory of the project#indexindex.htmlindex.htm;try_files$uri$uri//index.html;#Configure according to the rules of the official website}location~\.php${proxy_p

What technologies are used to build vue-cli projects What technologies are used to build vue-cli projects Jul 25, 2022 pm 04:53 PM

Technologies used: 1. vue.js, the core of the vue-cli project, whose main features are two-way data binding and component systems; 2. vue-router, the routing framework; 3. vuex, the state manager for vue application project development ; 4. axios, used to initiate http requests such as GET or POST; 5. vux, a mobile UI component library specially designed for vue; 6. emit.js, used to manage the vue event mechanism; 7. webpack, module Load and vue-cli project packager.

See all articles