webpack 引入非js文件样式

最新推荐文章于 2024-09-27 17:32:43 发布

原创最新推荐文章于 2024-09-27 17:32:43 发布 · 352 阅读

1 ·

本内容遵循CC 4.0 BY-SA版权协议

收录于

随笔

当前文章被收录于：

随笔

25 篇文章 0 人学习

订阅专栏查看详情

Vue

当前文章被收录于：

Vue

10 篇文章 0 人学习

订阅专栏查看详情

当前文章被以下社区和专栏收录：

本文详细介绍了如何使用Webpack配置加载非JS文件如CSS、LESS和SASS等样式资源。通过安装并配置style-loader和css-loader，以及less-loader和sass-loader，实现了在项目中引入和使用这些样式文件的方法。

webpack 引入非js文件样式

webpack基础配置1

创建一个css文件
在这里插入图片描述
其中输入测试样式

在main.js中引入
在这里插入图片描述
保存后会终端中会报错，因为缺少loader

ctrl+c 退出终端
输入 cnpm i style-loader css-loader -D 安装样式表

有报错在运行一遍

在webpack.config.js中继续配置loader模块

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

在这里插入图片描述
在运行 npm run dev ,此时可以看到，弹出了div盒子成功了

---------------

补充：添加less，与sass 样式

停止终端
输入cnpm i less-loader less -D
在这里插入图片描述
输入 cnpm i sass-loader node-sass -D

在webpack.config.js中输入对应的匹配规则

创建scss 文件和 less 文件

输入对应的测试代码

之后在main.js中引入

最后，在终端中运行npm run dev，就可以看到引入样式成功了
在这里插入图片描述