【webpack】【小程序】小程序使用sass，使用webpack单独处理sass到wxss

使用程序wxss书写样式不是很爽，想用scss又不会处理 可以使用webpack等工具来实现这种效果 或者使用vscode插件 Easy Sass。

需求

把每个页面文件夹里面的scss/css文件编译成wxss供小程序使用其他文件不做处理：

1. 使用工具先获取到所有需要处理的scss/css文件以及路径；
2. 通过scss-loader编译成css；
3. 通过插件将编译后的css文件根据获取的路径输出到相应的文件夹并改后缀为.wxss；

直接贴代码

对webpack不熟悉的同学可以了解下webpack的入门

目录结构

• src
  • 小程序项目
• package.json
• webpack.config.js

// package.json
{
	"name": "sass-wxss",
	"version": "1.0.0",
	"description": "",
	"main": "webpack.config.js",
	"scripts": {
		"build": "webpack --config webpack.config.js"
	},
	"keywords": [],
	"author": "",
	"license": "ISC",
	"devDependencies": {
		"css-loader": "^1.0.1",
		"mini-css-extract-plugin": "^0.4.5",
		"node-sass": "^4.11.0",
		"sass-loader": "^7.1.0",
		"webpack": "^4.29.6",
		"webpack-cli": "^3.3.0"
	},
	"dependencies": {
		"globby": "^9.2.0",
		"webpack-fix-style-only-entries": "^0.2.1"
	}
}

// webpack.config.js
// 单独打包样式文件
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
//删除多余js
const FixStyleOnlyEntriesPlugin = require('webpack-fix-style-only-entries');
const path = require('path');
const glob = require('globby');
// CSS入口配置
const CSS_PATH = {
	pattern: [ './src/**/*.scss', './src/**/*.css' ],
	src: path.join(__dirname, 'src')
};

// 遍历所有需要打包的SCSS/CSS文件路径
let getCSSEntries = (config) => {
	let fileList = glob.sync(config.pattern);
	return fileList.reduce((previous, current) => {
		let filePath = path.parse(path.relative(config.src, current));
		let withoutSuffix = path.join(filePath.dir, filePath.name);
		previous[withoutSuffix] = path.resolve(__dirname, current);
		return previous;
	}, {});
};

let config = {
	entry: getCSSEntries(CSS_PATH),
	output: {
		path: __dirname
	},
	module: {
		rules: [
			{
				test: /\.(scss|sass|css)$/,
				use: [
					// 需要用到的 loader
					MiniCssExtractPlugin.loader,
					'css-loader',
					'sass-loader'
				]
			}
		]
	},
	plugins: [
		new FixStyleOnlyEntriesPlugin(),
		new MiniCssExtractPlugin({
			filename: '/src/[name].wxss'
		})
	],
	resolve: {
		extensions: [ '.scss' ]
	}
};

module.exports = config;

使用webpack步骤

直接输入先按照上面的目录结构配置好之后 输入指令（前提有node环境）

npm i --save

npm run build

再查看src目录下面的小程序项目会惊奇的发现 每一个页面文件里面的scss文件都会多出来一个.wxss文件 试试吧！

使用vscode插件 Easy Sass 更容易实现

在vscode插件中搜索Easy Sass 并安装

安装好之后在vscode 设置（User Settings）里面配置

// User Settings
{
    "easysass.formats": [
        {
        "format": "expanded",
        "extension": ".wxss"
        }
    ],
    "easysass.targetDir": ""
}