webpack基本配置（下）样式表的引用

接着上一篇文章，如何在项目中引入样式文件

1.引入css文件

• 在src下新建css文件夹，新建base.css

index.html

base.css

• 正常我们想用这个样式表的话，直接link就行了，但是这样会发起二次请求，我们可以在main.js中用ES6的语法引入

main.js

• 但是一保存，就报错

• 提示我们需要装第三方loader，需要运行cnpm i style-loader css-loader -D

• 并且需要在webpack.config.js中添加一个配置节点（module），和plugins平级，这个节点用于配置所有的第三方模块加载器即loader模块

webpack.config.js

• 执行命令行npm run dev重新运行，样式添加上了

2.引入less文件

• 执行命令行cnpm i less-loader less -D 安装loader，并在webpack.config.js，添加配置如下

webpack.config.js

3.引入scss文件

• 在src下css文件夹，新建other.scss

index.html

other.scss

• 在main.js中引入样式表

main.js

• 执行命令行 cnpm i sass-loader node-sass -D，并在webpack.config.js，添加配置如下

webpack.config.js

• 执行命令行 npm run dev 运行,页面样式添加成功