CSS打包

安装style-loader和 css-loader

Webpack 本身只能处理 JavaScript 模块，如果要处理其他类型的文件，就需要使用 loader 进行转换。

Loader 可以理解为是模块和资源的转换器。

首先我们需要安装相关Loader插件，css-loader 是将 css 装载到 javascript；style-loader 是让 javascript 认识css

npm install --save-dev style-loader css-loader

修改webpack.config.js

const path = require("path"); //Node.js内置模块
module.exports = {//...,output:{},module: {rules: [  {  test: /\.css$/,    //打包规则应用到以css结尾的文件上use: ['style-loader', 'css-loader']}  ]  }
}

在src文件夹创建style.css

body{background:pink;
}

修改main.js

在第一行引入style.css

require('./style.css');

浏览器中查看index.html

看看背景是不是变成粉色啦？

webpack打包css文件相关推荐

Webpack打包css文件-css-loader+style-loader
一,前言之前"webpack介绍"一篇中提到webpack的四个核心概念:entry-入口,output-出口,loader-加载器,plugins-插件前面打包和输出文件使用了 ...
webpack打包css image,webpack 打包CSS 引入图片
加载css 安装style-loader, css-loader npm install style-loader css-loader --save-dev 配置webpack.config.js文 ...
webpack打包样式资源_使用loader去打包css文件_打包less文件---webpack工作笔记004
然后我们再来看看,怎么用webpack打包css资源文件, 因为我们知道webpack可以直接处理js,json文件,但是不能直接处理css文件,img文件对吧.. 我们现在,通过webpack的组件 ...
webpack对css文件打包：css-loader和style-loader版本过高问题
webpack对css文件打包:css-loader和style-loader版本过高问题问题描述安装css-loader:npm install --save-dev css-loader和st ...
webpack打包css和less文件
1. 前言 webpack是不能直接处理 css .less.图片等资源的,需要使用对应的 loader ,有关loader的介绍请查看这篇博客 webpack中的loader 2. 打包css文件 ...
【webpack】使用webpack打包图片文件、打包时生成单独的css文件
使用webpack打包图片文件在scr目录下创建image文件夹,并且添加几张图片在main.js使用import方式引入所有图片,并且append到app节点下 // 引入图片资源 import ...
webpack打包css
webpack打包 1.打包css 2.打包逻辑 1-1.webpack打包css逻辑 3.打包css 4.打包成独立的css文件 5.添加样式前缀 6.格式校验 7.压缩css 8.我们为什么要用这 ...
webpack打包vue文件报错，但是cnpm run dev正常，最后我只想说：是我太笨，还是webpack4.4版本太坑...
最近做一个项目,需要使用webpack打包 .vue 文件的单页面应用,调试都正常,使用cnpm run dev 都可以,就是webpack打包时报错.如下: ERROR in ./src/App.v ...
解决webpack打包css时CssSyntaxError的问题
打包CSS文件时的CssSyntaxError问题 // 可以使用的代码 const path = require('path');module.exports = {entry: './src/in ...

webpack打包css文件

CSS打包

安装style-loader和 css-loader

修改webpack.config.js

在src文件夹创建style.css

修改main.js

浏览器中查看index.html

webpack打包css文件相关推荐

最新文章

热门文章