精华内容
下载资源
问答
  • vue3.0在main.js中引入.scss文件报错
    2019-09-30 01:01:34

     

    写入.scss文件在mian.js中 import './styles/index.scss'后出现上图报错

    解决方案:

    在vue.config.js文件中添加以下代码

    module.exports = {

     css: {
      loaderOptions: {
       sass: {
         data: `@import "@/style/index.scss";`
       }
      }
     }

    }

     

    转载于:https://www.cnblogs.com/jmwei/p/10196554.html

    更多相关内容
  • 回答:我早上也报过这个错误 我建议你贴一下 webpack的配置代码我早上解决的方案是 重新卸载了css-...style-loader都去掉了很意外 没有问题了然后我刚才又试了试 加上了配置代码 中间css那块 果然 又报错了{test...

    44bc709e90dabe5f9dd7bcfdb45dee82.png

    759fdebada4472a4a3f14cc46f3839f3.png

    回答:

    我早上也报过这个错误 我建议你贴一下 webpack的配置代码

    我早上解决的方案是 重新卸载了css-loader style-loader file-loader 安装用-D

    然后也没有配置任何东西 之前配置的 webpack代码 css-loader!style-loader都去掉了

    很意外 没有问题了

    然后我刚才又试了试 加上了配置代码 中间css那块 果然 又报错了

    {

    test: /\.js$/,

    loader: 'babel-loader',

    include: [resolve('src'), resolve('test')]

    },

    {

    test:/\.css$/,

    loader:'css-loader!style-loader',

    },

    {

    test: /\.(png|jpe?g|gif|svg)(\?.*)?$/,

    loader: 'url-loader',

    options: {

    limit: 10000,

    name: utils.assetsPath('img/[name].[hash:7].[ext]')

    }

    },

    3e6c1facc7248e657f86a9c6bf2e8336.png

    综上 还是不要配置了 也有可能是我自己配置错了

    字体引入 你不能那么引入

    应该在css中引入

    @font-face {

    font-family: DS;

    src: url("../../assets/font/DS-DIGI.TTF");

    }

    body{

    font-family: DS;

    }

    回答:

    现在的vue-cli里面已经配置好了css各种loader,如果再配置一遍,必须设置include属性,否则报如上错误。

    回答:

    楼上说写config里头的css-loader等报错,是因为没有加include选项

    回答:

    css文件解析出错了.看下是不是语法有问题

    展开全文
  • 源代码: import Vue from 'vue' import App from './App.vue' import './assets/css/reset' ...找了网上很多帖子,并不能解决问题,最后的解决办法是在引入文件后面加.css后缀 如下--- import Vue from 'vue' ..

    源代码:

    import Vue from 'vue'
    import App from './App.vue'
    import './assets/css/reset'
    
    Vue.config.productionTip = false
    
    new Vue({
      render: h => h(App),
    }).$mount('#app')

     错误截图

     找了网上很多帖子,并不能解决问题,最后的解决办法是在引入文件后面加.css后缀

    如下---

    import Vue from 'vue'
    import App from './App.vue'
    import './assets/css/reset.css'
    
    Vue.config.productionTip = false
    
    new Vue({
      render: h => h(App),
    }).$mount('#app')

    展开全文
  • 转自:https://www.cnblogs.com/wangzhichao/p/7652749.html 这里是在vue组件中单独使用 1.安装vue-cli ...(加了挺头疼的,老是报错,但是对自己的代码规范性也是有很大的帮助的) 2.swiper下载示例

    转自:https://www.cnblogs.com/wangzhichao/p/7652749.html

    这里是在vue组件中单独使用

    1.安装vue-cli

    参考地址:https://github.com/vuejs/vue-cli

    如果不使用严格语法需要在后三项打no;(加了挺头疼的,老是报错,但是对自己的代码规范性也是有很大的帮助的)

    2.swiper下载示例代码

    参考地址:http://www.swiper.com.cn/usage/index.html

    一:单个组件使用:

    3.在刚下载好的vue-cli里的helloworld.vue进行代码编写。

       3.1html部分:

    复制代码
     1 <template>
     2   <div class="hello">
     3     <div class="swiper-container">
     4     <div class="swiper-wrapper">
     5         <div class="swiper-slide">Slide 1</div>
     6         <div class="swiper-slide">Slide 2</div>
     7         <div class="swiper-slide">Slide 3</div>
     8     </div>
     9     <!-- 如果需要分页器 -->
    10     <div class="swiper-pagination"></div>
    11     
    12     <!-- 如果需要导航按钮 -->
    13     <div class="swiper-button-prev"></div>
    14     <div class="swiper-button-next"></div>
    15     
    16     <!-- 如果需要滚动条 -->
    17     <div class="swiper-scrollbar"></div>
    18 </div>
    19   </div>
    20 </template>
    复制代码

      3.2 js部分:

    这里使用import引入swiper.js文件;

    swiper的启动放在mounted里执行;

    复制代码
    <script>
    import'../assets/js/swiper.min.js'
    export default {
      name: 'HelloWorld',
      data () {
        return {
          msg: 'Welcome to Your Vue.js App'
        }
      },
      mounted(){
         var mySwiper = new Swiper ('.swiper-container', {
        loop: true,
        // 如果需要分页器
        pagination: '.swiper-pagination',
        // 如果需要前进后退按钮
        nextButton: '.swiper-button-next',
        prevButton: '.swiper-button-prev',
        // 如果需要滚动条
        scrollbar: '.swiper-scrollbar',
      })        
      }
    }
    </script>
    复制代码

      3.3css部分:

     

    复制代码
     1 <style scoped>
     2 @import'../assets/css/swiper.min.css';
     3     body {
     4         margin: 0;
     5         padding: 0;
     6     }
     7     .swiper-container {
     8         width: 500px;
     9         height: 300px;
    10         margin: 20px auto;
    11     }
    12    
    13 
    14     </style>
    复制代码

     

    4.看似大工告成,这时候会报错:

    Uncaught TypeError: Cannot assign to read only property 'exports' of object '#<Object>'

    这个错误查文档说是:

    在webpack打包的时候,可以在js文件中混用require和export。但是不能混用import 以及module.exports。

    因为webpack 2中不允许混用import和module.exports

    我们只需要吧.babelrc文件里的第11行代码插件项"plugins": ["transform-runtime"],中的transform-runtime删掉即可;

    复制代码
     1 {
     2   "presets": [
     3     ["env", {
     4       "modules": false,
     5       "targets": {
     6         "browsers": ["> 1%", "last 2 versions", "not ie <= 8"]
     7       }
     8     }],
     9     "stage-2"
    10   ],
    11   "plugins": [],
    12   "env": {
    13     "test": {
    14       "presets": ["env", "stage-2"],
    15       "plugins": ["istanbul"]
    16     }
    17   }
    18 }
    复制代码

    5.好了问题解决;

    二:全局使用:

    6.当然也可以全局使用swiper;代码如下;

    还是在刚才的helloworld.vue进行代码编写;只是去掉js和css文件的引入!

    helloworld.vue代码:

    复制代码
     1 <template>
     2   <div class="hello">
     3     <div class="swiper-container">
     4     <div class="swiper-wrapper">
     5         <div class="swiper-slide">Slide 1</div>
     6         <div class="swiper-slide">Slide 2</div>
     7         <div class="swiper-slide">Slide 3</div>
     8     </div>
     9     <!-- 如果需要分页器 -->
    10     <div class="swiper-pagination"></div>
    11     
    12     <!-- 如果需要导航按钮 -->
    13     <div class="swiper-button-prev"></div>
    14     <div class="swiper-button-next"></div>
    15     
    16     <!-- 如果需要滚动条 -->
    17     <div class="swiper-scrollbar"></div>
    18 </div>
    19   </div>
    20 </template>
    21 
    22 <script>
    23 
    24 export default {
    25   name: 'HelloWorld',
    26   data () {
    27     return {
    28       msg: 'Welcome to Your Vue.js App'
    29     }
    30   },
    31   mounted(){
    32      var mySwiper = new Swiper ('.swiper-container', {
    33     loop: true,
    34     // 如果需要分页器
    35     pagination: '.swiper-pagination',
    36     // 如果需要前进后退按钮
    37     nextButton: '.swiper-button-next',
    38     prevButton: '.swiper-button-prev',
    39     // 如果需要滚动条
    40     scrollbar: '.swiper-scrollbar',
    41   })        
    42   }
    43 }
    44 </script>
    45 
    46 <!-- Add "scoped" attribute to limit CSS to this component only -->
    47 <style scoped>
    48 
    49     body {
    50         margin: 0;
    51         padding: 0;
    52     }
    53     .swiper-container {
    54         width: 500px;
    55         height: 300px;
    56         margin: 20px auto;
    57     }
    58    
    59 
    60     </style>
    复制代码

    main.js文件代码:

     常见报错解决:

    Uncaught TypeError: Cannot assign to read only property 'exports' of object '#<Object>'

    .babelrc文件里的插件项"plugins": ["transform-runtime"],中的transform-runtime删掉即可;


    展开全文
  • main.js一引入vuex的时候就报错,找了好久都没有解决,对比视频上的代码也没有区别就是出错
  • vue在main.js中全局引用css的方法及坑

    千次阅读 2021-08-04 05:28:32
    步骤:1、配置文件webpack.config.js:{test:/\.css$/,loader:'style-loader!css-loader'}坑1:-loader尾缀坑2:Module build failed: Unknown word模块创建失败:未知文字????解决方案:注掉整个css的配置,即...
  • 当我将我的vue项目更换目录提交后报出了这个错误,想起了vue引入jquery和bootstrap时的问题。 所以我尝试着重新执行了引入jquery和bootstrap,步骤如下: 也就是分别执行了: ...cnpm install css-loade...
  • Vue.js 项目引入 Element-UI 组件库并配置路由的详细步骤。
  • ✨: 如果使用的是 JS 可以删除类型校验 import type { Component } from 'vue' import SvgIcon from './SvgIcon/index.vue' // ✨如果使用的是 JS 可以删除类型校验 const components: { [propName: string]: ...
  • 报错会提示无法解决xxxxxxxxx.ttf之类的文件 于是我就一个一个的解决,还好就三种格式,直到报错小时,页面正常 解决方法 还是在webpack.config.js下配置loader 这里我们需要的是url-loader 安装 npm ...
  • 1、在项目中定义了一个对axiox进行配置的文件,其中需要引入vuex,在response...mian.ts文件中也引入了store,确是可以打印出来东西的。2、截图文件目录打印结果import axios from 'axios'import { Message } from '...
  • Vue项目常见报错问题汇总 项目经验

    千次阅读 2021-03-27 16:22:48
    这个相关的模块没有找到 问题分析: 在main.js中没找到iconfont.css,这种问题,一般都是路径问题 问题解决: 在mian.js中确定引入iconfont.css的路径,看是否有误 2.4.代码切换分支合并分支时被删除 问题描述: 当...
  • (十五)webpack

    2020-10-18 23:40:39
    webpack是一个JavaScript应用的静态模块打包工具。 [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-NNs6HUr3-1603035588597)(./images/15-1.png)] 从这句话中有两个要点,模块和打包需要...
  • 5、main.js,app.vue,import from,router

    千次阅读 2019-07-12 10:06:00
    一、main.js main.js是程序的入口,用于初始化vue实例,使用需要的插件,加载公共组件 需要导入 import Vue from 'vue' ...main.js导入router import router from './router' ////import后面的rou...
  • webpack是不能直接处理 css 、less、图片等资源的,需要使用对应的 loader
  • node.js之全栈开发

    2021-05-13 21:43:08
    node.js之全栈开发为什么要学习Node.jsNode.js是什么Node能做什么一些资源学习到什么起步安装Node环境解析执行JavaScript文件的读写文件读取:文件写入 为什么要学习Node.js 企业需求 具有服务端开发经验更改 front...
  • 进入vue项目学习后,时常会出现js导入后的加载顺序不当的报错,本文主要和大家分享vue项目js导入加载顺序详解,希望能帮助到大家。在引入的js中:var block = document.getElementById("block");// 绑定touchstart...
  • webpack打包优化js大小

    2021-01-27 18:06:17
    文章目录前言一、JS拆分二、按需加载tree shaking总结 前言 自己搭建了一个webpack+react+typescript打包的脚手架,使用antd来实现UI,build完后出现了一行WARNING WARNING in entrypoint size limit: The following ...
  • 可能是scss文件未安装。vue-awesome-swiper 的scss文件要单独安装。并不随包一块导入。 cnpm install --save swiper swiper/swiper-bundle.css swiper/swiper.scss
  • mian.js中进行引入 import "./icons" 出现的警告信息如下: 解决方案 将src/icons/index.js全局挂载的方法写到main.js中去,代码如下: // 引入SvgIcon组件 import SvgIcon from "@/components/SvgIcon";...
  • Vue 学习总结笔记 (六)

    千次阅读 2022-03-01 14:25:55
    其实Vue的js文件有很多版本,只不过我们导入的Vuejs文件是一个精简版(缺少部分功能的Vue)。 而上面的vue.runtime.esm.js文件,就残缺了模板解析器,没有了模板解析器就没法解析template中的内容了。 1.2 使用完整版...
  • webpack3.12.0 打包工具,初学知识点 1.初始化项目,并且下载webpack 进入项目目录,然后输入: npm init --yes 这个命令执行后,项目汇总会出现一个package.json...因为简单示范,我们只用到vue.js,所以我没有执行
  • 为什么要学习Node.js

    2021-12-02 19:54:35
    为什么要学习Node.js - 企业需求 - 具有服务端开发经验更改 - front-end - back-end - 全栈开发工程师 - 基本的网站开发能力 - 服务端 - 前端 - 运维部署 - 多人社区 ![image-20200317114503403](C:\Users...
  • node.js学习笔记整合

    2021-02-10 16:04:08
    为什么要学习Node.js 企业需求 具有服务端开发经验更改 front-end back-end 全栈开发工程师 基本的网站开发能力 服务端 前端 运维部署 多人社区 [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来...
  • 记得配置完vue.confing.js要重启项目 ...一定要记得,你下载了什么就在mian.js 里引入什么 代码 import Vue from ‘vue’ import App from ‘./App.vue’ import router from ‘./router’ import store from
  • 文章目录1 mint-ui1.1 全部导入组件1.2 CSS示例使用按钮1.3 JS示例使用toast1.4 按需导入2 mui 1 mint-ui 饿了么组件mint ui:Github 仓储地址,Mint-UI官方文档 1.1 全部导入组件 导入依赖:npm install mint-ui -S...
  • node.js笔记

    2021-05-11 15:56:35
    Node是一个基于Chrome V8引擎的JavaScript代码运行环境。 安装 下载 官方网址:https://nodejs.org/en/ LTS:Long Term Support 长期支持版(稳定版)。 Current:拥有最新特性版本(实验版)。 验证 在windows ...
  • NODE.JS

    2020-11-10 10:04:19
    Node介绍 为什么要学习Node.js ...通俗易懂的讲,Node.jsJavaScript的运行平台 Node.js既不是语言,也不是框架,它是一个平台 浏览器中的JavaScript EcmaScript 基本语法 if var function Object Array
  • Nodejs自学笔记

    2021-08-06 11:11:50
    基础操作 执行nodejs 注意:再node.js中没有BOM和DOM ...此时文件夹下会自动创建一个json文件,这就是node的配置文件,其中main下面就是默认打开js文件 PS F:\Nodejs\02\code> npm init -y Wrote to
  • 配置vue.config.js2.4. 重置样式表2.5. 配置样式表2.6. 安装less2.7. 注册less2.8. 代码中使用三、vant安装/配置/测试3.1. 安装vant-ui3.2. 引入与注册3.3. vant测试四、axios 工具封装4.1. 下载安装axios4.2. 创建...

空空如也

空空如也

1 2 3 4 5 ... 14
收藏数 278
精华内容 111
关键字:

mian.js导入css文件报错