wxss，在小程序中写scss的巧妙方法

2024-01-16 04:03:52

简介

在小程序中，我们通常使用 wxss 来定义样式。然而，wxss 相对于 scss 来说，显得比较繁琐。scss 是一种更强大的样式语言，它允许我们使用变量、函数和 mixin 来编写更简洁和可维护的样式代码。

为了在小程序中使用 scss，我们需要使用 webpack 来将 scss 编译成 wxss。webpack 是一个现代化的构建工具，它可以将多种类型的文件编译成最终可以运行的代码。

在本教程中，我们将学习如何使用 webpack 将 scss 编译成 wxss，以及将编译后的 wxss 文件集成到小程序中。

2. 设置项目

首先，我们需要创建一个新的项目。我们可以使用以下命令来创建一个新的 npm 项目：

npm init -y

接下来，我们需要安装 webpack。我们可以使用以下命令来安装 webpack：

npm install webpack webpack-cli -D

安装完成后，我们需要在项目中创建一个 webpack.config.js 文件。这个文件将告诉 webpack 如何编译我们的代码。

const path = require('path');

module.exports = {
  entry: './src/index.scss',
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'bundle.wxss',
  },
  module: {
    rules: [
      {
        test: /\.scss$/,
        use: [
          'style-loader',
          'css-loader',
          'sass-loader',
        ],
      },
    ],
  },
};

在 webpack.config.js 文件中，我们指定了入口文件（entry）、输出文件（output）和加载器（loader）。

入口文件 ：这是 webpack 将要编译的第一个文件。在本例中，我们的入口文件是 src/index.scss。
输出文件 ：这是 webpack 将要输出的最终文件。在本例中，我们的输出文件是 dist/bundle.wxss。
加载器 ：加载器用于将一种类型的文件编译成另一种类型的文件。在本例中，我们使用 style-loader、css-loader 和sass-loader 来将 scss 文件编译成 wxss 文件。

3. 编写 SASS 文件

接下来，我们需要在项目中创建一个 src/index.scss 文件。这个文件将包含我们的 scss 代码。

/*
  你的 scss 代码
*/

在 index.scss 文件中，我们可以编写我们的 scss 代码。我们可以使用变量、函数和 mixin 来编写更简洁和可维护的样式代码。

4. 编译 SASS 文件

要编译 scss 文件，我们可以使用以下命令：

npm run build

这将使用 webpack 来编译 scss 文件并生成最终的 wxss 文件。

5. 将编译后的 wxss 文件集成到小程序中

要将编译后的 wxss 文件集成到小程序中，我们需要将它复制到小程序的项目目录中。

cp dist/bundle.wxss miniprogram/app.wxss

然后，我们需要在小程序的 app.json 文件中添加以下代码：

{
  "pages": [
    "pages/index/index"
  ],
  "window": {
    "navigationBarBackgroundColor": "#000000",
    "navigationBarTextStyle": "white",
    "navigationBarTitleText": "首页",
    "backgroundColor": "#ffffff"
  },
  "tabBar": {
    "list": [
      {
        "pagePath": "pages/index/index",
        "text": "首页",
        "iconPath": "image/icon_index.png",
        "selectedIconPath": "image/icon_index_active.png"
      }
    ]
  },
  "usingComponents": {}
}