配置css，less，scss等文件的方法

最新推荐文章于 2025-04-02 14:37:12 发布

coder_glack

最新推荐文章于 2025-04-02 14:37:12 发布

阅读量1.4k

点赞数 1

本文链接：https://blog.youkuaiyun.com/qq_43013884/article/details/89931234

版权

本文介绍了如何使用webpack配置处理css、less和scss文件，包括使用style-loader, css-loader, less-loader和scss-loader。同时，还详细说明了配置处理图片类型的步骤，如安装url-loader和file-loader，并解释了limit参数的意义。" 137721919,11738408,理解APQC的知识流动过程,"['知识管理', '流程框架', '企业实践', '知识流动', '英文翻译']

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

webpack配置css，less，scss等文件的方法

-1. css

需要用到的插件 style-loader css-loader
使用下列代码安装插件

sudo npm i style-loader css-loader

1.1 首先在src/css下面创建一个css文件，命名为index.css 在这里插入图片描述
1.2 在内存中，根据指定的模板页面，生成一份内存中的首页，同时把打包好的bundle注入页面底部

var htmlWebpackPlugin = require(‘html-webpack-plugin’
1.3 配置plugins和module。

//由于webpack是基于node进行的，所以在配置文件中，任何node的代码都是支持的
var path = require('path')

// 1.在内存中，根据指定的模板页面，生成一份内存中的首页，同时把打包好的bundle注入页面底部
var htmlWebpackPlugin = require('html-webpack-plugin')


//当以命令行形式运行 webpack 或 webpack-dev-server 的时候我们发现并没有提供打包文件的入口和出口文件
//此时，他会检查项目根目录的配置文件，
module.exports = {
  entry: path.join(__dirname, './src/main.js'),  //入口文件
  output: {    //指定输出选项
    path: path.join(__dirname, './dist'),    //输出路径
    filename: 'bundle.js',  //指定输出文件的名称
  },
  mode: 'development', // 设置mode
  plugins: [
    new htmlWebpackPlugin({
      template: path.join(__dirname, './src/index.html'),    //指定模板文件路径
      filename: 'index.html'   //设置生成的内存页面名称 
    })
  ],
  module: {   //配置所有第三个loader模块的
    rules: [
      { test: /\.css$/, use: ['style-loader', 'css-loader'] },  //处理 css 文件的loader
      { test: /\.less$/, use: ['style-loader', 'css-loader','less-loader'] },  //处理 less 文件的loader
      
    ]
  }
}

1.4 使用下面指令查看设置css样式之后的改变

npm run dev

2.less

2.1.创建一个less文件
2.2.安装less-loader插件
```
sudo cnpm i less-loader less -D
```
2.3.运行指令
```
npm run dev
```
2.4 导入less包

import ‘./css/index.less’

3.scss

3.1.创建一个scss文件
3.2.安装less-loader插件
```
sudo cnpm i sass-loader node-sass -D
```
3.3.运行指令
```
npm run dev
```
3.4 导入less包

import ‘./css/index.scss’

4.配置图片类型的方法

4.1添加图片
4.2 安装配置图片的插件

sudo cnpm i url-loader file-loader -D
4.3 使用第三方的匹配规则
```
 { test: /\.(jpg|png|gif|bmp|jpeg)$/, use:
```
‘url-loader?limit=6400&name=[hash:8]-[name].[ext]’}
- 4.3.1 参数的意义
  - limit: 是一个图片大小的最大值单位为byte
  - name: 一个名字 -hash: 是一个以hash字符串为结束命名的字符串 limit:
4.4运行测试

npm run dev