【webpack】【小程序】小程序使用sass,使用webpack单独处理sass到wxss
使用程序wxss书写样式不是很爽,想用scss又不会处理 可以使用webpack等工具来实现这种效果 或者使用vscode插件 Easy Sass。
需求
把每个页面文件夹里面的scss/css文件编译成wxss供小程序使用其他文件不做处理:
- 使用工具先获取到所有需要处理的scss/css文件以及路径;
- 通过scss-loader编译成css;
- 通过插件将编译后的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": ""
}