3

我在这里撞墙了。

对于我的项目，我希望 Laravel Mix/webpack 将一个.scss-file 编译成两个文件，一个常规的、未缩小的（扩展或嵌套的）.css文件和一个缩小的（压缩的）.min.css文件，所以我基本上拥有这两个文件。

我试过：

mix.sass('src', 'output')
   .copy('output.css', 'output.min.css')
   .minify('output.min.css');

但是，这会导致错误，因为.css未编译 -file。

我知道 Laravel Mix 在运行时会缩小，npm run production但我对两个文件感兴趣，而不仅仅是一个production编译成的文件。

有没有办法做到这一点，而无需修改整个 webpack 配置？

4

4 回答 4

2

我通过弄乱一些东西找到了答案，并得出结论，我不会为此使用 Laravel Mix 的production-script。我找不到 Laravel Mix 在运行时不缩小常规 CSS 的方法npm run production，但是，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')
});

当mix.then()webpack 完成构建时触发，并.minify()会自动创建一个名为app.min.css.

然后当我运行时npm run dev，我的 Sass 将以嵌套格式编译，并且它也会被缩小。不是最优雅的解决方案，但这是我能想到的最好的解决方案。

嘿，如果它很愚蠢但有效，那它并不愚蠢。我的意思是，CPU 从字面上看是一块我们被欺骗思考的石头¹。

于 2017-06-06T07:18:37.247 回答
0

你可以试试这个-

mix.js('resources/assets/js/bootstrap.js', 'public/js')
    .sass('resources/assets/sass/bootstrap.scss', 'public/css');

但很快检查文件中的名称 bootstrap.scss。

于 2018-06-18T09:45:27.220 回答
0

Laravel Mix/Webpack 在 package.json 文件中有一些预构建脚本。保持这样：

mix.sass('resources/assets/sass/app.scss', 'public/css');

当你想npm run production在控制台中缩小 css 时，否则npm run development.

编辑：如果你想同时做两个流 sassed 和 minified 分别做：

mix.sass('src', 'output');
mix
.sass('src', 'output')
.minify('output.min.css');
于 2017-06-01T11:50:11.570 回答
0

老问题，但我认为这可能会有所帮助：

/**
 * Tested over Laravel Mix V6 
 */
//If your in development, normally you compile the original css. You can run (npx mix watch) command then start your edits
if(!mix.inProduction()) {
    mix.js( 'src/app.js', 'dist/' )
    .sass('src/output.scss', 'assets/css/output.css');
}

//Then this will run only on production, which will minify the output
if(mix.inProduction()) {
    mix.js( 'src/app.js', 'dist/' )
    .sass('src/output.scss', 'assets/css/output.min.css');
}
于 2022-02-20T17:33:32.370 回答