《前端》使用webpack+vue从零开始打造前端项目(2020最新版)三--css、stylus打包及使用--bilibili--2021-01-22

七、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标签。