webpack 引入模块css 错误_webpack错误加载css,模块构建失败 - CSDN
精华内容
参与话题
  • webpack引入css错误

    千次阅读 2017-05-08 10:01:48
    提示:you need to specify 'style-loader' instead of 'style' 提示 vue2.0 不支持简写


    提示:you need to specify 'style-loader' instead of 'style'   提示 vue2.0 不支持简写




    展开全文
  • webpack引入css

    千次阅读 2018-05-06 15:35:17
    前言:本文演示了如何打包css文件;涉及到的loader: css-loader、style-loader;css-loader的任务:把css文件作为模块打包style-loader的任务:把打包好的css文件动态的插入到html文件的<style>标签内...

    前言:

    • 本文演示了如何打包css文件;
    • 涉及到的loader: css-loader、style-loader;
    • css-loader的任务:把css文件作为模块打包
    • style-loader的任务:把打包好的css文件动态的插入到html文件的<style>标签内


    正文:

    如何利用webpack把样式打包进我们的项目文件?

    在webpack的世界里,一起文件都是模块。

    默认webpack只会打包js代码,如何想要打包其它内容,就需要相对应的loader。


    安装css-loader、style-loader

    $ npm i -D css-loader style-loader

    配置webpack.config.js

    注意:loader处理的顺序:

    • 先是css-loader处理(webpack把mian.css文件作为模块打包)
    • 接着是style-loade处理(让打包后的css可以写入html文件中的<style>)

    在app.js文件中引入main.css

    编辑main.css


    最后,执行 $ npm run build

    在浏览器预览生成的index.html文件,打开控制台可以看到js动态加载的<style>:


    展开全文
  • 1、webpack概述:webpack是一款加载兼打包工具,它能把各种资源,例如J(含JX)、coffee、样式(含less/sass)、图片等都作为模块来使用和处理。2、全局安装:在安装Webpack之前,我们的本地环境需要支持node.js。安装...

    1、webpack概述:

    webpack是一款加载兼打包工具,它能把各种资源,例如J(含JX)、coffee、样式(含less/sass)、图片等都作为模块来使用和处理。

    2、全局安装:

    在安装Webpack之前,我们的本地环境需要支持node.js。安装node.js可以参考node官方文档。

    使用如下命令在全局安装webpack

    npm install webpack -g


    3、webpack的使用步骤

    A:JS文件的引用

    (1)创建一个名为webpack的文件夹,里面创建两个文件夹,一个是app,一个是build;创建一个名为”webpack.config.js“的配置文件。

    (2)在webpack文件夹下执行以下命令,生成package.js文件:

    npm init

    文件内容如下:此文件用来告知一些基本信息


    (3)在webpack文件夹下执行以下命令,配置webpack的相关服务:

    npm install --save-dev webpack-dev-server
    经过以上操作,package.json文件中,多出以下一段代码:


    (4)配置在第一步创建的webpack.config.js文件:


    如图所示:app文件夹中需要有index.js文件,可以随便写一些js代码进去,然后在build文件夹中需要有bundle.js文件,它就是打包文件。

    (5)打包文件的使用:

     在build文件夹中新建一个index.html文件,引入同目录下的bundle.js文件。

    配置快速启动webpack,在package.json文件里加入

     "scripts": {
         "start": "webpack",
         "server": "webpack-dev-server --open"
       },

    到此,我们的package.json文件里的内容是这样的:


    如果有哪里不对的,小伙们记得自己检查一下啊。

    (6)运行终端,打包js文件到bundle.js

    在终端中,定位到当前文件夹webpack---cd 当前目录

    然后执行webpack命令,webpack就已经开始运行了:


    (7)之后去运行index.html页面,就能看到效果了。


    B:CSS文件的引用

     经过了引入JS的操作,引入CSS文件的操作就简单多了

    (1)首先,我们需要下载css样式加载模板的文件

    npm install style-loader css-loader --save

    (2)在配置文件中,加入以下代码:


    这里尤其需要注意的一点是,在运行终端之前,

    需要在index.js文件中,引入index.css文件,以便于二者一并被打包起来。


    现在的终端界面是这样的:


    细心的小伙伴可能发现了,刚才的那张终端截图,它只监控着index.js的运行,

    而上面这张,加入了css的监控和打包,是不是很神奇啊


    另外还有一点需要注意的是,加完上述打包css的代码后,需要重新运行打包命令哦,

    否则会显示一个“模块加载失败,你可能需要一个适合的加载器加载这个文件”的错误,小伙伴们注意一下哈。


    这样,我们就可以在index.html引入包含css和js的bundle.js打包文件了,

    在css文件和js文件中编辑会实时在bundle.js中展现在index.html文件中



    展开全文
  • vue中配置mint-ui报css错误的问题

    千次阅读 2017-01-22 15:48:10
    在vue2.0中引入了mint-ui后总是报一个css错误 但是package.json中已经配置了css-loader style-loader ,webpack.config中也已经配置了css,还是报这个错误,相反,如果把webpack.config中css的配置注释掉就不会...

    在vue2.0中引入了mint-ui后总是报一个css的错误
    这里写图片描述

    但是package.json中已经配置了css-loader style-loader ,webpack.config中也已经配置了css,还是报这个错误,相反,如果把webpack.config中css的配置注释掉就不会出错,这是为什么呢?
    因为 在webpack.config中没有设置好css引入的目录,因为默认情况下我们只会引入/src/目录下的css,
    但是mint-ui是要冲node_modules目录去引入的,所以在webpack.config中css的配置中加入一项

    {
            test: /\.css$/,
            include: [
              /src/,
              '/node_modules/mint-ui/lib/'   //增加此项
            ],
            loader: "style!css"
          },

    当然,. babelrc中要配置成这样的:

    {
      "presets": [
            "es2015","stage-0"
            ],
      "plugins": [
        ["component", [
          { 
            "libraryName": "mint-ui",
            "style": true 
          }
        ]]
      ]
    }

    要确保es6转义成es5的插件都已经安装,
    这里写图片描述

    webpack.config中要配置完整:
    这里写图片描述

    如果webpack.config中没有配置presets:[‘es2015’],的话会报一个import的错误:
    这里写图片描述
    这个错误就是因为es6的语法转义失败造成的

    注:webpack.config的配置要根据webpack的版本,不同的版本配置方法不一样,我这里使用的是webpack1.0的版本

    展开全文
  • webpack引入图片

    千次阅读 2018-09-10 12:20:02
    webpack如何在css文件中引入图片; webpack如何在html中引入图片; 需要安装配置的loader: file-loader; 为何要使用file-loader: 如果我们希望在页面引入图片(包括img的src和background的url)。当我们基于...
  • webpack的extract-text-webpack-plugin插件

    千次阅读 2019-03-12 14:12:11
    今天要和大家分享的webpack的插件extract-text-webpack-plugin。我们先聊聊webpack的一个打包机制,webpack本来只能能打包处理.js文件,但是通过强大的loader之后,可以打包处理各种类型的文件。比如:.css文件等。 ...
  • webpack之使用less和scss

    千次阅读 2018-05-04 15:41:23
    其实,应用sass或者less,是指先将文件交给sass-load或者less-loader处理成css文件,然后再交给css-loader、style-loader进行处理。如果你的项目中使用了scss。安装sass-loader、node-sass$ npm i -D sass-loader no...
  • webpack打包(二)(含面试)

    千次阅读 2018-06-02 17:25:29
    处理CSS引入csscss-loader提取css文件extract-text-webpack-plugin3.本地开发服务器:webpack-dev-server路径重定向,支持https,浏览器中可以显示编译错误,可以进行接口代理,模块热更新proxy代理远程接...
  • webpack 打包css文件

    千次阅读 2018-05-10 17:42:55
    webpack中,每个文件都是一个模块css、js、html、jpg、less)。对于不同的模块使用不同的加载器.文章中使用的版本:node:4.6.0,webpack 4.6.0文章中的配置:安装 webpack-dev-server一、直接打包css1.、安装...
  • Webpack中 的css-loader和less-loader

    万次阅读 2016-12-08 15:53:51
    简介:在Webpack中,通过css-loader,可以实现在js文件中通过require的方式,来引入css。1.css-loader我们需要在js文件里,通过require的方式来引入css,我们来看具体的方法,首先需要安装css-loader, style-...
  • webpack学习笔记-1-css-loader & style-loader

    万次阅读 2017-06-27 21:35:23
    简要介绍了webpack css-loader和style-loader的使用
  • webpackcss进行单独打包

    千次阅读 2018-03-30 16:53:16
    我们都知道webpack是可以直接去处理javascript的代码,但是对于css、image、font等,是不能直接处理的,需要使用到loader将其转化成javbascript代码片,然后在对其进行处理 对于处理css,需要使用到的loader是:...
  • webpack超详细配置, 使用教程(图文)

    万次阅读 多人点赞 2018-12-24 11:33:54
    博主在这里就不详细介绍webpack来源以及作用了, 本篇博文面向新手主要说明如何配置webpack, 以及webpack的使用方法, 直到创建出一个合理的属于自己webpack项目.流程webpack安装 Step 1: 首先安装Node.js, 可以去Node...
  • webpack之项目中引入字体

    千次阅读 2018-05-06 15:33:34
    前言:本文演示了如何在项目中应用字体图标;用到的loader: file-loader正文:...在app.js中引入main.css文件:这里根据以往经验,我们知道这里需要一个loader来处理我们的字体图标。这里,我们需要loader帮我们做两...
  • 一、以前面四篇文章为基础,我们接下来利用webpack进行css的抽离。这里需要安装一个插件。在安装之前,首先要说明一下,如果没有第四篇文章为前提,也就是图片没有进行处理的话,在抽离css的时候,它将无法解析css中...
  • Webpack—配置路径别名

    万次阅读 2018-04-14 15:51:04
    模块化开发项目中,比如vue和react等,经常需要import不同的js或者css模块到当前目录,那么如果路径比较深的话使用相对路径就比较麻烦,而且在文件迁移的时候,如果在不同的目录下边,又得改变以下引入的路径。...
  • Webpack学习笔记 webpack介绍和安装

    万次阅读 2019-09-05 23:10:28
    * 在Webpack看来, 前端的所有资源文件(js/css/img/less/...)都会作为模块处理 * 它将根据模块的依赖关系进行静态分析,生成对应的静态资源 官方文档:https://www.webpackjs.com/ 笔记: Webpack 本身只能...
  • webpack处理css

    千次阅读 2017-03-29 15:22:14
    在神奇的babel中我们提到了babel-loder的使用,那么webpack声称可以处理任何类型的文件,css该怎么处理呢,好,我们来走一遍 首先介绍下style-loader和css-loader,因为处理css文件之前必须要安装这两个模块,至于这...
  • webpack常见面试题

    千次阅读 2019-06-27 10:57:46
    1.从零开始搭建一个简单的基于webpack的vue开发环境 a.安装webpack npm i webpack -g b.项目初始化 1)新建项目文件夹‘myproject’ 2)创建package.json.。 npm init -y 3)安装vue,webpack,webpack-dev-...
  •  webpack模块打包工具二、webpack安装 版本:4.6.0npm install webpack --save-dev npm install webpack-cli --save-dev三、配置文件webpack.config.jspubliPath的默认地址为当前目录。module.exports = { ...
1 2 3 4 5 ... 20
收藏数 18,775
精华内容 7,510
关键字:

webpack 引入模块css 错误