当前位置: article > 正文

TypeScript学习笔记（三）——贪吃蛇_在index.ts中引入index.less为什么报错

作者：在线问答5 | 2024-08-19 14:02:45

踩

在index.ts中引入index.less为什么报错

配置文件

1、将之前写好的package.json、webpack.config.js、tsconfig.json 复制到当前目录下

2、使用 npm i 初始化环境

3、在src目录下新建 index.html 和 index.ts

4、安装工具：npm i -D less less-loader css-loader style-loader

5、修改相关配置文件：

（1）webpack.config.js：

	// 指定webpack打包时要使用的模块
    module:{
   
        // 指定要加载(loader)的规则
        rules:[
        	......
        	// 设置less文件的处理
            {
   
                test:/\.less$/,
                use:[
                    "style-loader",
                    "css-loader",
                    "less-loader"
                ]
            }
        ]
    },
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

为了使css样式能够兼容各个浏览器，还要使用 postcss：npm i -D postcss postcss-loader postcss-preset-env

            // 设置less文件的处理
            {
   
                test:/\.less$/,
                use:[
                    "style-loader",
                    "css-loader",
                    {
   
                        loader:"postcss-loader",
                        options:{
   
                            postOptions:{
   
                                plugins:[
                                    [
                                        "postcss-preset-env",
                                        {
   
                                            browsers:'last 2 versions'
                                        }
                                    ]
                                ]
                            }
                        }
                    },
                    "less-loader"
                ]
            }
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29

这样会自动把样式处理成各个浏览器可兼容的样式
在这里插入图片描述

实现基本样式

1、index.html

<body>
    <!-- 创建游戏的主容器 -->
    <div id="main">
        <!-- 设置游戏的舞台 -->
        <div id="stage">
            <!-- 设置蛇 -->
            <div id="snake">
                <!-- 设置蛇身体的各部分（由多个方块组成） -->
                <div></div>
            </div>
            <!-- 设置食物 -->
            <div id="food">
                <!-- 添加4个小div来设置食物的形状 -->
                <div></div>
                <div></div>
                <div></div>
                <div></div>
            </div>               
        </div>
        <!-- 设置游戏的记分牌 -->
        <div id="score-pannel">
            <div>
                SCORE:<span id="score">0</span>
            </div>
            <div>
                LEVEL:<span id="level">1</span>
            </div>
        </div>
    </div>
<script src="./index.js"></script>
</body>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31

2、index.less

// 设置变量
@bg-color:#b7d4a8;

// 清除默认样式
*{
   
    margin: 0;
    padding: 0;
    // 改变盒子模型的计算方式
    box-sizing: border-box;
}

body{
   
    font: bold 20px "Courier";
}

// 设置主窗口的样式
#main{
   
    width: 360px;
    height: 420px;
    // 背景颜色
    background-color: @bg-color;
    // 居中
    margin: 100px auto;
    border: 10px solid black;
    // 圆角
    border-radius: 40px;
    // 弹性盒
    display: flex;
    // 主轴方向
    flex-flow: column;
    // 侧轴的对齐方式
    align-items: center;
    // 主轴的对齐方式
    justify-content<
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/在线问答5/article/detail/1002600