3. css-loader

安装

npm install css-loader -D

loader配置方式

module.rules 中允许我们配置多个 loader，rules属性对应的值是一个数组： [Rule]

Rule是一个对象，对象中可以设置多个属性：

test属性：用于对 resource（资源）进行匹配的，通常会设置成正则表达式；
use属性：对应的值时一个数组：[UseEntry]
- UseEntry是一个对象，可以通过对象的属性来设置一些其他属性
- loader：必须有一个 loader属性，对应的值是一个字符串；
- options：可选的属性，值是一个字符串或者对象，值会被传入到loader中；
- query：目前已经使用options来替代；
loader属性： Rule.use: [ { loader } ] 的简写。

module.exports = {entry: "./src/main.js",output: {filename: "bundle.js",path: path.resolve(__dirname, "./build")    // 必须是一个绝对路径},module: {rules: [{// 规则使用正则表达式test: /\.css$/, // 匹配资源use: ["style-loader"]}]}
}

style-loader

可以通过css-loader来加载css文件，但是在代码中并没有生效。

css-loader只是负责将.css文件进行解析，并不会将解析之后的 css插入到页面中。

如果我们希望再完成插入style的操作，那么我们还需要另外一个loader，就是 style-loader 。

安装style-loader： npm install style-loader -D

配置style-loader

      {test: /\.css$/, use: ["style-loader", "css-loader"]}

完整案例：

src / index.js

import "./index.css"
const element = document.createElement("div")
element.style.width = 200 + "px"
element.style.height = 200 + "px"
element.className = "box"
document.body.appendChild(element)

src/index.css

.box {background-color: red;
}

处理less文件

1. Less工具处理

npm install less -Dnpx less ./src/css/title.less > title.css // .bin下有lessc, 将 title.less 转换成 title.css

2. 项目中配置 less-loader

npm install less-loader -D

      {test: /\.less$/,use: ["style-loader","css-loader","less-loader"]}

3. css-loader相关推荐

webpack css loader
我们新建一个login.js文件,作为一个组件. 这里定义了一个函数,函数中创建了h2标签,然后给标签中添加文字.还有类名className,最后把这个dom返回.最后通过document.body. ...
css loader的安装
css loader 1.通过require的方式来引入css,我们来看具体的方法,首先需要安装css-loader, style-loader(安装style-loader的目的是为了在html中以 ...
nextjs 写 css loader 处理多地区不同基础变量的方法
由于项目在多地区进行发布,为了复用,主工程使用同一个,但是这样会带来一个问题,由于地区的设备分布不同,以及当地的字体选择不一样,从而导致了 global 中的一些熟悉无法复用,而且必须配置两套,那么如 ...
css loader.net,* !!vue-style-loader!css-loader?
ERROR Failed to compile with 1 errors 11:17:27 This dependency was not found: * !!vue-style-loader!c ...
css加载不起作用,webpack css loader不起作用
您好我正在尝试通过我的vue2js SPA中的webpack style-loader加载bootstrap css . 我用 npm install --save-dev css-loader 安装 ...
css-loader 版本号,css loader安装问题
$ npm install css-loader style-loader --save-dev npm WARN engine css-loader@2.1.0: wanted: {"no ...
CSS Modules 用法教程
学过网页开发就会知道,CSS 不能算编程语言,只是网页样式的一种描述方法. 为了让 CSS 也能适用软件工程方法,程序员想了各种办法,让它变得像一门编程语言.从最早的Less.SASS,到后来的 Po ...
webpack自定义loader并发布到npm
一.官网对loader的解释: 1.loader 是导出为一个函数的 node 模块.该函数在 loader 转换资源的时候调用.给定的函数将调用 loader API,并通过 this 上下文访问. ...
gmod的css模块放哪里,webpack打包css报错找不到模块？
环境:webpack3.10.0 webpack.config.js配置如下: const path = require('path'); const HtmlWebpackPlugin = requ ...
webpack入门（四）——webpack loader 和plugin
什么是loader loaders是你用在app源码上的转换元件.他们是用node.js运行的,把源文件作为参数,返回新的资源的函数. 例如,你可以用loaders告诉webpack加载 coffe ...

3. css-loader

style-loader

3. css-loader相关推荐

最新文章

热门文章