【Webpack基础】处理样式（二）

1. importLoader

在一些老版本的webpack里面，Loader写成字符串，只会在第一次引入的时候sass编译，下一次引入就不会编译了

此时就需要配置 importLoader 属性了

新版本的 webpack 默认就有这个配置

1.1 配置

{
    test: /\.scss$/i,
    use: [
        "style-loader",
        {
            loader: "css-loader",
            options: {
                importLoader: 2 // 走之前的两个loader -> postcss-loader、sass-loader
            }
        },
        "postcss-loader",
        "sass-loader"
    ],
}

1.2 示例

logo.css

#app {
    img {
        width: 100px;
        height: 100px;
        transform: rotate(45deg);
    }
}

index.css

@import './logo.scss';
body {
    background-color: #fff;
    #app {
        width: 300px;
        height: 300px;
        border: 1px solid #000;
    }
}

index.js

import './index.scss';

打包后

2. CSS 模块化 CSS Modules

一种规范

让 CSS 按模块来进行处理、影响

2.1 问题：引入样式作用于所有 JS 文件

createLogo.js

import jspp from './jspp.jpg';

function createLogo() {
    const img = new Image();
    img.src = jspp;
    img.className += 'logo'

    const app = document.getElementById('app');
    app.appendChild(img);
}

export default createLogo;

index.scss

body {
    background-color: #fff;
    img {
        width: 100px;
        height: 100px;
        transform: rotate(45deg);
    }
}

index.js

import jspp from './jspp.jpg';
// 作用于所有index.sass里面写的img元素，相当于是一个全局样式
import './index.scss';
import createLogo from './createLogo';

const img = new Image();
img.src = jspp;
img.className += 'logo'

const app = document.getElementById('app');
app.appendChild(img);

createLogo();

怎样只作用于当前文件？—— 开启css模块化

2.2 配置

1. 配置

   {
       test: /\.scss$/i,
       use: [
           "style-loader",
           {
               loader: "css-loader",
               options: {
                   importLoader: 2,
                   modules: true // 开启css模块化
               }
           },
           "postcss-loader",
           "sass-loader"
       ],
   }
   

2. 使用

   import jspp from './jspp.jpg';
   // 第一步：导入样式
   import styles from './index.scss';
   import createLogo from './createLogo';
   
   const img = new Image();
   img.src = jspp;
   // 第二步：使用样式对象里的类名
   img.className += `${styles.logo}`
   
   const app = document.getElementById('app');
   app.appendChild(img);
   
   createLogo();
   

3. 打包字体文件

3.1 准备工作

1. iconfont 下载字体图标

2. src 目录下创建 fonts 文件夹，放入字体文件

3. iconfont.css 放入 indes.sass，资源路径前面加上 fonts/

   @font-face {
       font-family: "iconfont"; /* Project id 3446962 */
       //              后缀看这里 ↓                     不是看这里 ↓
       src: url('fonts/iconfont.woff2?t=1654167604990') format('woff2'),
            url('fonts/iconfont.woff?t=1654167604990') format('woff'),
            url('fonts/iconfont.ttf?t=1654167604990') format('truetype');
     }
     
     .iconfont {
       font-family: "iconfont" !important;
       font-size: 16px;
       font-style: normal;
       -webkit-font-smoothing: antialiased;
       -moz-osx-font-smoothing: grayscale;
     }
     
     .icon-shouye:before {
       content: "\e61b";
     }
   

3.2 问题：引入字体文件报错

原因：webpack 不认识这些字体文件，需要进行配置

3.3 配置

module.exports = {
    ...
    module: {
        rules: [
        	...
            {
                test: /\.(eot|svg|ttf|woff|woff2)/,
                loader: 'file-loader'
            }
            ...
        ]
    },
    ...
}

file loader现在已经不用了，url loader已经包含了file loader 了