太长了;滚动到底部寻找答案,或者将 Webpack 和 Dart Sass VM 结合起来。https://github.com/sass/dart-sass/releases/ https://github.com/sass/dart-sass/releases/
不确定其他人是否遇到过这个问题,但我在观看文件时的第一次保存可能需要 6-7 秒(6720 毫秒)。
然后它通常会下降 2-3.5 秒。
我正在使用 Webpack 5,最新版本sass-loader
and sass
。我还包括Fibers
根据 Webpacks 的建议,我确实没有看到任何改进。
我的 JS 编译时间不到一秒。
我也尝试过memory
and filesystem
Webpack 缓存中的设置也是如此。我也尝试过cache-loader
.
我当前的 SCSS 规则如下所示:
const path = require('path');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const Fiber = require('fibers');
const Sass = require('sass');
const config = require('../app.config');
module.exports = {
rules: [{
test: /\.s[ac]ss$/,
exclude: /node_modules/,
include: config.paths.sass,
use: [
MiniCssExtractPlugin.loader,
{
loader: 'css-loader',
options: { sourceMap: true },
},
{
loader: 'postcss-loader',
options: {
postcssOptions: {
config: path.resolve(__dirname, '../postcss.config.js'),
},
}
},
{
loader: 'sass-loader',
options: {
sourceMap: true,
sassOptions: {
fiber: Fiber
},
}
}
]
}]
};
我的浏览器对 postcss 的支持是:
module.exports = {
plugins: {
'postcss-preset-env': {
stage: 0,
browsers: ['last 2 versions', 'not dead', '> 0.2%']
},
}
};