七、css打包
css文件是前端项目不可少的文件,webpack通过css-loader和style-loader来打包css文件。
1、安装css-loader和style-loader
安装file-loader时,css-loader已经安装好了,可以在package.json中查看。
安装style-loader:npm install -D style-loader
2、在webpack.config.js中添加规则
书写顺序:按照从右到左,从下到上
, {//css-loader
test: /\.css$/,
use: ['style-loader', 'css-loader'],// 顺序有讲究
}
3、创建css文件
在src/assets/styles中创建text.css文件,写入样式。
4、引入样式文件
在vue.app中引入text.css文件:import './assets/styles/text.css';
5、打包 并验证
npm run build---》打开inde.html文件查看效果。
补:css-loader和style-loader的作用分别是什么?
css-loader是解决css文件之间的依赖关系,相当于汇总样式,把所有css文件打包成一个文件,之后在给上一级(style-loader)
style-loader是将css-loader打包好生成的文件挂载到头部(head标签)的style中。
八、stylus
(一)stylus介绍与插件
stylus作为node项目普遍使用的css预处理器,被广泛应用于vue项目中。
推荐两个插件:language-stylus 和 supremacy
language-stylus:提供语法高亮效果和一些支持;
supremacy:自动格式化stylus 插件,可根据个人习惯和公司要求定制stylus格式,如是否要;、:。
// 以下为stylus配置
"stylusSupremacy.insertColons": false, // 是否插入冒号
"stylusSupremacy.insertSemicolons": false, // 是否插入分好
"stylusSupremacy.insertBraces": false, // 是否插入大括号
"stylusSupremacy.insertNewLineAroundImports": false, // import之后是否换行
"stylusSupremacy.insertNewLineAroundBlocks": false, // 两个选择器中是否换行
说是要配置,在哪里配置?
(二)stylus打包
1、安装工具包:stylus和stylus-loader
npm install -D stylus stylus-loader
- stylus 是stylus文件预处理程序,作用是将stylus编译成css格式
- stylus-loader 是加载stylus 文件,调用stylus 预处理程序形成css文件。
2、配置
3、创建css文件
在src/assets/styles中创建global.styl文件,写入样式。
4、在app.vue中引入
import './assets/styles/global.styl'
5、打包测试
npm run build --》
报错:
ERROR in ./src/assets/styles/global.styl 3:20
Module parse failed: Unexpected token (3:20)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders
| body
| // 背景图片
> background-image: url('../images/1.png')
| // 背景图片位置固定
| background-attachment: fixed
@ ./node_modules/vue-loader/lib/index.js??vue-loader-options!./src/app.vue?vue&type=script&lang=js& 6:0-36
@ ./src/app.vue?vue&type=script&lang=js& 1:0-115 1:131-134 1:136-248 1:136-248
@ ./src/app.vue 2:0-55 3:0-50 3:0-50 9:2-8
@ ./src/main.js 6:0-27 13:8-11
webpack 5.16.0 compiled with 1 error in 516 ms
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! firstVue@1.0.0 build: `webpack`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the firstVue@1.0.0 build script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.
npm ERR! A complete log of this run can be found in:
npm ERR! D:\Program Files\nodejs\node_cache\_logs\2021-01-22T14_45_39_071Z-debug.log
未解决:
打包好之后,运行index.html文件发现报错,作如下修改:
(三)在vue中使用stylus
在app.vue中添加lang='stylus' 和 scoped。
scoped 作用域:当前h1只会影响当前app.vue的h1标签。