我把头靠在墙上。
对于我的项目,我希望Laravel Mix / webpack将.scss
文件编译成两个文件,一个常规的,未缩小的(扩展的或嵌套的).css
文件,以及一个缩小(压缩)的.min.css
文件,所以我基本上有两个文件。
我尝试过:
mix.sass('src', 'output')
.copy('output.css', 'output.min.css')
.minify('output.min.css');
但是,这会导致错误,因为未编译.css
文件。
我知道Laravel Mix在运行npm run production
时会缩小,但我对两个文件感兴趣,而不仅仅是production
编译的那个。
有没有办法做到这一点,而无需修改整个webpack配置?
Laravel Mix / Webpack在package.json文件中有一些预构建脚本。保持像:
mix.sass('resources/assets/sass/app.scss', 'public/css');
当你想缩小css时,在控制台中执行npm run production
,否则npm run development
。
编辑:如果你想做两个流sassed和minified做分开:
mix.sass('src', 'output');
mix
.sass('src', 'output')
.minify('output.min.css');
你能试试这个 -
mix.js('resources/assets/js/bootstrap.js', 'public/js')
.sass('resources/assets/sass/bootstrap.scss', 'public/css');
但是很快就会在文件中检查名称bootstrap.scss。
我通过弄乱一些东西找到答案,并得出结论我不打算使用Laravel Mix的production
脚本。我无法找到Laravel Mix在运行npm run production
时不缩小常规CSS的方法,但production
需要minify()
才能工作,因为如果环境是development
它不会缩小。
所以我拉了一个缩小命令的包。这就是minifier()
拯救的地方。
npm install --save-dev minifier
然后我的webpack.mix.js
看起来像这样:
let mix = require('laravel-mix');
let minifier = require('minifier');
mix.sass('src/sass/app.scss', 'public/css/', {
outputStyle: 'nested'
});
mix.then(() => {
minifier.minify('public/css/app.css')
});
当webpack完成构建时会触发mix.then()
,.minify()
将自动创建一个名为app.min.css
的新文件。
然后,当我运行npm run dev
时,我的Sass将以嵌套格式编译,并且它也将被缩小。不是最优雅的解决方案,但这是我能想到的最好的解决方案。
嘿,如果它是愚蠢但它有效,它并不愚蠢。我的意思是,CPU实际上是一块岩石,我们欺骗了思考¹。