vue-cli的main.js中引入全局scss

最新推荐文章于 2024-03-21 10:00:00 发布

蓝色的落叶

最新推荐文章于 2024-03-21 10:00:00 发布

阅读量1.9k

点赞数

CC 4.0 BY-SA版权

分类专栏： vue项目文章标签： main.js vue-cli

本文链接：https://blog.csdn.net/qq_38502227/article/details/100520845

本文介绍了在使用vue-cli时，在main.js中引入scss文件导致的报错情况。错误提示可能由于sass-loader配置冲突或安装不完整引起。通过检查新项目的配置并确保所有依赖正确安装，可以解决这个问题。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

在最新的vue-cli的main.js中引入scss文件，结果报了以下的错误
在这里插入图片描述
我查了很多资料都说是build 文件下util.js 和 base.config.js中重复配置了sass-loader

{
   
   
    test: /\.scss$/,
    use: [
        {
   
   
            loader: 'style-loader' // creates style nodes from JS strings
        },
        {
   
   
            loader:

最低0.47元/天解锁文章

200万优质内容无限畅学

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

蓝色的落叶

关注关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
分享

复制链接

分享到 QQ

分享到新浪微博

扫一扫
举报

举报

专栏目录

使用vue-cli4.x构建项目

关注我！带你一路 "狂飙" 到底！

12-01

326

从 vue-cli3.0 开始 build 和 config 目录就取消了，如果需要修改配置，可以在项目的根目录新建一个 vue.config.js 文件来覆盖项目的配置，因为项目的配置比较多，下面简单列举常用的配置。在项目根目录下新建 .env.test、.env.preview、 .env.production 文件，分别对应三个环境的配置文件，注意，名字要与 --mode 后面的名字分别对应。出现如图红框所示的提示，就搭建成功，进入项目目录，直接输入 npm run serve 就可以了。

Vue-cli4：引入全局SCSS文件（通用变量）

qq_33991007的博客

09-08

2411

项目中需求引入全局scss文件（配置通用变量），在查找一番后，成功配置：首先需要在根目录下新增配置文件vue.config.js(如果已经创建了则不需要)；接着创建全局scss文件：在配置文件vue.config.js中增加如下代码: module.exports = { chainWebpack: config => { const oneOfsMap = config.module.rule("scss").oneOfs.store; oneOfsMap.forEac

参与评论您还未登录，请先登录后发表或查看评论

vue-cli4配置引入scss全局文件

weixin_42206375的博客

03-18

1100

vue-cli4配置引入scss全局文件 link 有时候我们想要想webpack的预处理器loader传递选项。你可以使用vue.config.js中的css。loaderOptions选项，这是基于vue-cli4的一个vue-config.js的配置module。有别于3版本 // vue.config.js module.exports = { css: { loaderOp...

在项目中全局引入scss的变量，以及如何在js中使用scss变量

D浩DzD的博客

05-07

2956

在项目中发现已经在main.js中全局引入了样式文件，但是对于scss中的变量还是不能在页面中直接使用，还需要再具体的页面中导入。上面这种方式比较麻烦。可以通过在vue.config.js中配置后只需要在main.js中引入就可以全局使用了。下图在main.js中引入了scss的样式文件。必须在具体页面中引入才能正常使用。

mpvue全局引入sass文件

martsforever的博客

07-24

6987

在使用sass开发的时候，我们经常需要在各个页面使用统一的变量，还有一些方法，这种公共的资源如果不进行特殊处理的话，我们在每个页面都需要@import进来才能使用，当页面多起来的话，后期维护起来可能会有点吃力，这里介绍在mpvue下如何处理sass全局引入sass资源文件的步骤：首先需要安装sass-resource-loader（我这里版本号是1.3.3）： npm install ...

css预处理器scss的使用&&如何全局引入

Mr.小灰狼_随笔

03-21

6069

css预处理器scss的使用&&如何全局引入目录 scss 基本功能 1、嵌套 2、变量 $ 3、@mixin 和 @include 4、@extend 5、@import scss 在项目中的使用 1、存放 scss 文件 2、引入 variables 和mixins 2-1、局部引入 2-2、全局引入 3、入口文件中引入其他文件

vue-cli4.x创建企业级项目的方法步骤

11-20

- 在 `main.js` 中引入 `lib-flexible`： ```javascript import 'lib-flexible'; ``` - 创建 `postcss.config.js` 文件并配置： ```javascript module.exports = { plugins: { 'autoprefixer': { browsers:...

在 vue-cli v3.0 中使用 SCSS/SASS的方法

08-27

如果你希望定义一下全局能够使用的 SCSS 样式，首先需要创建一个 SCSS 文件，然后在项目的 main.js 中使用 import 命令就像导入模块一样，将独立 SCSS 文件全局导入项目。例如：`import "./static/common.scss";` ...

vue实战vue移动端项目架构设计（基于vue-cli4）.zip

10-21

Vue.js 是一款流行的前端JavaScript框架，它以组件化、易用性和高性能著称。Vue CLI 4 是Vue.js的命令行工具，用于快速搭建现代化的前端项目。在本项目“vue实战vue移动端项目架构设计（基于vue-cli4）”中，我们将...

vue3.0在main.js中引入.scss文件报错

N112112的博客

12-29

1057

写入.scss文件在mian.js中 import './styles/index.scss'后出现上图报错解决方案：在vue.config.js文件中添加以下代码 module.exports = { 　css: { 　　loaderOptions: { 　　　sass: { 　　　　　data: `@import "@/style/index.scss";...

main.js中定义全局方法，组件直接饮用

LiangRZ

05-12

1717

Vue.prototype.get7Day = function(n) { // 定义相关方法 this.date = [] this.date[0] = `${d().subtract(n, 'day').$y}-${d().subtract(n, 'day').$M + 1}-${d().subtract(n, 'day').$D}` this.date[1] = `${d(new Date()).$y}-${d(new Date()).$M + 1}-${d(new Date())..

main.js引入阿里巴巴矢量图/定义全局变量/引入封装的js文件/全局组件/mixins全局混入/全局组件原型实例

weixin_45665171的博客

02-26

541

main.js引入阿里巴巴矢量图/定义全局变量/引入封装的js文件/全局组件/mixins全局混入/全局组件原型实例

vue:在main.js中全局引用css的方法及坑(转载)

1111111111

12-03

4148

步骤： 1、配置文件webpack.config.js：　　{ 　　　　test:/\.css$/, 　　　　loader:'style-loader!css-loader' 　　} 　　坑1：-loader尾缀　　坑2：Module build failed: Unknown word模块创建失败：未知文字？？？？　　　　解决方案：注掉整个css的配置，即：　　　　　　//{ 　　　　　　　　//test:/\.css$/, 　　　　　　　　//loader:'style-.

【vue】VUE项目中，MAIN.JS引入SCSS文件时报错

庭落

04-24

1705

当我们在src目录下创建.scss文件，并在main.js中引用，运行时会报： ERROR Failed to compile with 1 errors 5:25:07 PM This relative module was not found: * ./main.scss in ./src/main.js 如图所示解决方法：新版本的vue-cli已经帮我们把sass-loader配置...

vue 引入 scss 文件到 main.js 报错

大白的博客

08-08

2112

在引入公共 scss 文件的时候，发现一直编译不成功，报错如下， This relative module was not found: * ./main. in ./src/main.js 本来以为是路径写错了，直接放到平级目录，还是引入不成功，结果发现是sass loader 的问题找到 webpack.base.conf.js 文件，删掉以下配置 { test: /...

Sass文件的导入import和Partials

知行合一

05-17

7383

1、import方式引入scss文件，后面必须带后缀名scss@import "main.scss";2、Partials方式引入base.scss文件,文件必须以（下划线）开头，可以不用带后缀名@import "base";如图：

vue-cli生成项目，main.js中引入scss文件报错

yymiao_的博客

04-22

560

记录一个自己遇到的main.js引入全局scss报错的问题，尝试了一些解决方法都没有用，最后发现是scss-loader的版本过高导致的。原解决方案链接 https://zhuanlan.zhihu.com/p/84090368 ...

scss引入报错问题

chuziyan的博客

03-04

920

3、打包处理scss文件运行npm install sass-loader node-sass -D命令，在webpack.config.js的rules中添加{test:/.scss$/, user:[‘style-loader’,‘css-loader’,‘sass-loader’]} ———————————————— 版权声明：本文为CSDN博主「→_→✌」的原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接及本声明。原文链接：https://blog.csdn.net/qq_

在vue项目中引入scss，以及解决在main.js里引用scss报错

鲁小班的博客

07-16

4238

第一步：执行命令 cnpm install node-sass --save-dev cnpm install sass-loader --save-dev 第二步：切记不需要在webpack.base.config.js中去配置了loader了，主要原因是新版本的vue-cli已经帮我们把sass-loader配置好了，放在了util.js里面。一旦配置将会在main.js里引用s...

@ ./src/renderer/main.js @ multi ./.electron-vue/dev-client ./src/renderer/main.js ERROR in ./src/renderer/views/page2-3/index.vue?vue&type=style&index=0&id=b3e81550&lang=scss&scoped=true (./node_modules/css-loader!./node_modules/vue-loader/lib/loaders/stylePostLoader.js!./node_modules/px2rem-loader??ref--0-2!./node_modules/sass-loader/dist/cjs.js!./node_modules/vue-loader/lib??vue-loader-options!./src/renderer/views/page2-3/index.vue?vue&type=style&index=0&id=b3e81550&lang=scss&scoped=true) Module not found: Error: Can't resolve './@assets/images/arrow-right.png' in 'D:\newproject\句容崇明小学文昌校区语文课程基地大屏\jrcmyw\src\renderer\views\page2-3' @ ./src/renderer/views/page2-3/index.vue?vue&type=style&index=0&id=b3e81550&lang=scss&scoped=true (./node_modules/css-loader!./node_modules/vue-loader/lib/loaders/stylePostLoader.js!./node_modules/px2rem-loader??ref--0-2!./node_modules/sass-loader/dist/cjs.js!./node_modules/vue-loader/lib??vue-loader-options!./src/renderer/views/page2-3/index.vue?vue&type=style&index=0&id=b3e81550&lang=scss&scoped=true) 7:875-918 @ ./node_modules/vue-style-loader!./node_modules/css-loader!./node_modules/vue-loader/lib/loaders/stylePostLoader.js!./node_modules/px2rem-loader??ref--0-2!./node_modules/sass-loader/dist/cjs.js!./node_modules/vue-loader/lib??vue-loader-options!./src/renderer/views/page2-3/index.vue?vue&type=style&index=0&id=b3e81550&lang=scss&scoped=true @ ./src/renderer/views/page2-3/index.vue?vue&type=style&index=0&id=b3e81550&lang=scss&scoped=true @ ./src/renderer/views/page2-3/index.vue 是这么写的吗有问题啊 background: url('@assets/images/arrow-right.png') no-repeat;