2-1 (webapack4 loader)-webpack加载css所需lodar及其使用方式

webpack官网对Loader的解释:
在这里插入图片描述需要注意的是,webpack是JavaScript 应用程序的静态模块打包器,不能处理javascript以外类型的文件,loader可以让 webpack 能够去处理那些非 JavaScript 文件。

1.首先,我们需要安装loader:
需要安装两个,分别为:style-loader 和 css-loader
打开终端,进入项目文件夹的路径,输入安装命令为:npm install style-loader css-loader --save-dev
2.配置loader
1)在webpack.config.js文件里配置module中的rules:
注意:在 webpack 的配置中 loader 有两个目标:
test 属性:用于标识出应该被对应的 loader 进行转换的某个或某些文件。
use 属性:表示进行转换时,应该使用哪个 loader。
在webpack.config.js文件里配置module中的rules
webpack.config.js全部代码为:

const path = require('path');


module.exports = {
   // path指文件打包后存放的路径
   entry:'./public/index.js',
   output:{
   	//path.resolve()方法将路径或路径片段的序列处理成绝对路径
   	//__dirname表示当前文件所在目录的绝对路径
   	path:path.resolve(__dirname,'build'),
   	//filename是打包后的文件名称
   	filename:'bundle.js'
   },
   devServer:{
   	contentBase:'./build',//设置服务器访问的基本目录,就是我们打包完成的目录
   	host:'localhost',//服务器的IP地址
   	port:8080,//端口号
   	open:true,//自动打开页面
   },
   module:{
   	rules:[
   		{
   			test:/\.css$/,
   			use:['style-loader','css-loader']
   		}
   	]
   }
}

3.运行npm run dev
这时就已经打包好啦,你会在build文件夹下发现一个bundle.js文件,新建一个html文件,把bundle.js文件引入就可以了,这时你设置的css就可以生效啦。
注意要在index.js文件中引入css,代码为:
import './index.css';

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
webpack加载style-resources-loader使用方法如下: 1. 首先,确保已经在项目中安装了webpack和style-resources-loader。 ```shell npm install webpack style-resources-loader --save-dev ``` 2. 在webpack配置文件中,添加style-resources-loader的配置。 ```javascript const path = require('path'); module.exports = { // 其他配置... module: { rules: [ // 其他规则... { test: /\.scss$/, use: [ // 其他loader... 'style-loader', 'css-loader', 'sass-loader', { loader: 'style-resources-loader', options: { patterns: [ path.resolve(__dirname, '路径/到/样式资源文件1.scss'), path.resolve(__dirname, '路径/到/样式资源文件2.scss'), ], }, }, ], }, ], }, }; ``` 3. 在配置中,使用style-resources-loaderloader,将样式资源文件引入到每个需要的样式文件中。 在上面的配置中,可以看到`patterns`选项里指定了两个样式资源文件的路径,你可以根据自己的需求进行扩展或更改。注意,路径需要使用`path.resolve`方法来获取绝对路径。 例如,如果你的项目中有`styles`文件夹,并且在该文件夹下有`variables.scss`和`mixins.scss`两个样式资源文件,你可以将路径配置为: ```javascript patterns: [ path.resolve(__dirname, 'styles/variables.scss'), path.resolve(__dirname, 'styles/mixins.scss'), ], ``` 这样,在每个`.scss`文件中,你就可以直接使用这些样式资源,而无需每次都手动引入。 总结一下,通过在webpack配置文件中的module.rules中添加style-resources-loader的配置项,来一次性加载全局样式资源文件,从而简化样式文件的引入。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值