常用的样式loader
- style-loader : 将css样式加载到页面的标签里面
- css-loader: 解析( @import 和 url() ,会 import/require() 后再解析(resolve)它们。
- less-loader: 解析less语法
- postcss-loader: 添加css前缀,需要在项目根目录下新建postcss.config.js文件,进行相关配置。
(一) 处理css文件
-
在src文件夹中创建index.js文件,base.css文件,并在index.js文件中引入base.css文件
index.js文件内容:
import './base.css';
base.css文件内容:
html,body{ background-color: pink; }
-
安装 style-loader和css-loader
npm i style-loader -D
npm i css-loader -D
-
在webpack的配置文件webpack.config.js的做loader配置中做如下处理
//loader的配置 module:{ rules:[ //详细loader配置 { test:'/\.css$/', use:[ //创建style标签,并将js中的样式资源插入到style标签中,然后添加到页面的head中生效 'style-loader', //将css文件变成commonjs模块加载js中,里面内容是样式字符串 'css-loader' ] } ] },
-
进行打包
webpack
-
在文件输出的文件夹(build)下可以得到输出文件(built.js),并在当前文件夹中新建一个index.html文件,将built.js引入进来,打开index.html文件,可以看到页面为粉色。
-
在打开的index.html文件中的head中有自己写的css样式。
(二) 处理less文件
-
在入口文件(src\index.js)所在的目录下创建common.less文件
html{ body{ background-color: red; } }
-
在入口文件index.js中引入common.less文件
import './common.js';
-
安装 css-loader,style-loader,less-loader,对less文件进行处理
npm i style-loader -D
npm i css-loader -D
npm i less-loader -D
-
在webpack配置文件webpack.config.js进行配置
css和less有很多loader相同,但是不能混合使用,要分开//处理less的loader { test: /\.less$/, use:[ //创建style标签,并将js中的样式资源插入到style标签中,然后添加到页面的head中生效 'style-loader', //将css文件变成commonjs模块加载js中,里面内容是样式字符串 'css-loader', //处理less文件 'less-loader' ] }
-
进行打包
webpack