微信小程序使用 Sass 预编译,可以提高 CSS 的可维护性和复用性。下面是使用 Sass 预编译的步骤:
1. 安装 Node.js 和 npm。
2. 在项目根目录下创建 package.json 文件,输入以下代码:
{
"name": "your-app-name",
"version": "0.1.0",
"description": "Your App Description",
"scripts": {
"build:wxss": "node-sass --output-style compressed -o dist/css src/scss"
},
"dependencies": {
"node-sass": "^4.14.1"
}
}
3. 运行以下命令安装依赖:
npm install
4. 在项目根目录下创建一个 src/scss 目录,将你的 Sass 文件放入其中。
5. 在 app.wxss 中导入编译后的 css 文件:
@import '../dist/css/app.wxss';
6. 运行以下命令编译 Sass 文件:
7. 运行以下命令监听 Sass 文件变化,自动编译:
node-sass --output-style compressed -o dist/css src/scss --watch
通过以上步骤,就可以在微信小程序中使用 Sass 预编译了。