CSS 预处理器

未匹配的标注

CSS 预处理器

mix.sass('src', 'output', pluginOptions);
mix.standaloneSass('src', 'output', pluginOptions); // 与 Webpack 构建隔离。
mix.less('src', 'output', pluginOptions);
mix.stylus('src', 'output', pluginOptions);
mix.postCss('src', 'output', [require('precss')()]);

单个方法调用允许您编译 Sass,Less 或 Stylus 文件,同时自动应用 CSS3 前缀。

虽然 webpack 可以将所有 CSS 直接内联到捆绑的 JavaScript 中,但 Laravel Mix 会自动执行必要的步骤以将其提取到所需的输出路径。

多个构建

如果需要编译多个根文件,可以根据需要多次调用 mix.sass()(或任何预处理器变体)。对于每次调用,webpack 将输出一个包含相关内容的新文件。

mix.sass('src/app.scss', 'dist/') // 创建 'dist/app.css'
    .sass('src/forum.scss', 'dist/'); // 创建 'dist/forum.css'

示例

我们来看一个简单的例子:

webpack.mix.js

let mix = require('laravel-mix');

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

./resources/assets/sass/app.sass

$primary: grey

.app
    background: $primary

提示:对于Sass编译,您可以自由使用 .sass.scss 语法样式。

像往常一样编译它(npm run webpack),你会发现包含了以下内容的 ./public/css/app.css 文件:

.app {
    background: grey;
}

插件选项

编译的时候, Laravel Mix 的首先是去分别的调用 Node-Sass, Less,和 Slylus 来编译你的 Sass, Less 文件。有时,你可能需要重写我们传递给它们的默认选项。可以将它们作为第三个参数提供给 mix.sass(), mix.less()mix.stylus()

mix.sass('src', 'destination', { outputStyle: 'nested' });

Stylus 插件

如果使用 Stylus, 你可能希望安装额外的插件,比如 Rupture 。运行 NPM (npm install rupture) 来安装这个插件,然后在你的mix.stylus() 中调用, 例如:

mix.stylus('resources/assets/stylus/app.styl', 'public/css', {
    use: [require('rupture')()]
});

如果希望更进一步,并且在全局中自动导入插件,您可以使用 import 选项。这里有一个例子:

mix.stylus('resources/assets/stylus/app.styl', 'public/css', {
    use: [require('rupture')(), require('nib')(), require('jeet')()],
    import: ['~nib/index.styl', '~jeet/jeet.styl']
});

就是这个样子滴!

CSS url() 重写

一个关键的 webpack 概念是,它将重写你的样式表中的任何 url()。虽然这可能最初听起来很奇怪,但它是一项非常强大的功能。

一个例子

假设我们想要编译一些Sass,其中包含一个图像的相对url。

.example {
    background: url('../images/thing.png');
}

Tip: url() 的绝对路径将被排除在 url 重写之外。因此, url('/images/thing.png')url('http://example.com/images/thing.png') 将不会被更改。

注意,这里说的是相对 URL? 默认情况下,Laravel Mix 和 webpack 将会找到 thing.png ,将其复制到 public/images 文件夹中,然后在生成的样式表中重写 url()。因此,编译的 CSS 将是:

.example {
    background: url(/images/thing.png?d41d8cd98f00b204e9800998ecf8427e);
}

这也是 webpack 的一个很酷的特性。然而,它确实有一种倾向,让那些不理解 webpack 和 css-loader 插件如何工作的人感到困惑。你的文件夹结构可能已经是您想要的了,而且你希望 Mix 不要修改那些 url()。如果是这样的话,我们确实提供了一个覆盖方式:

mix.sass('src/app.scss', 'dist/').options({
    processCssUrls: false
});

把这个加入你的 webpack.mix.js 文件中,我们将不再匹配 url() 或复制资源到你的公共目录。因此,编译后的 CSS 将与你输入时一样:

.example {
    background: url('../images/thing.png');
}

这样的好处是,当禁用 url 处理时,您的 Webpack Sass 编译和提取可以更快。

PostCSS插件

默认情况下,Mix 将通过流行的 Autoprefixer PostCSS plugin 插件管理所有 CSS。因此,您可以自由地使用最新的 CSS3 语法,并知道我们将自动应用任何必要的浏览器前缀。在大多数情况下,默认设置应该没问题,但是,如果您需要调整底层的 Autoprefixer 配置,请按以下步骤操作:

mix.sass('resources/assets/sass/app.scss', 'public/css').options({
    autoprefixer: {
        options: {
            browsers: ['last 6 versions']
        }
    }
});

此外,如果您希望完全禁用它 - 或依赖于已包含 Autoprefixer 的PostCSS 插件:

mix.sass('resources/assets/sass/app.scss', 'public/css').options({
    autoprefixer: false
});

但是,您可能希望将 additional PostCSS plugins 应用于您的构建版本。这没问题,只需通过 NPM 安装所需的插件,然后在 webpack.mix.js 文件中引用它,如下所示:

mix.sass('resources/assets/sass/app.scss', 'public/css').options({
    postCss: [require('postcss-custom-properties')]
});

好了! 您现在可以使用和编译自定义 CSS 属性(如果您想这么做的话)。 例如,如果 resources / assets / sass / app.scss 包含...

:root {
    --some-color: red;
}

.example {
    color: var(--some-color);
}

...编译后,您将看到:

.example {
    color: red;
}

漂亮!

PostCss 不适用 Sass/Less

或者,如果你更喜欢跳过 Sass/Less/Stylus 编译步骤,而是使用 PostCSS,你可以通过 mix.postCss() 方法来完成。

mix.postCss('resources/assets/css/main.css', 'public/css', [
    require('precss')()
]);

请注意,第三个参数是应该应用于你构建的 postcss plugins 的数组。

独立Sass构建

如果你不希望 Mix 和 Webpack 以任何方式处理你的 Sass 文件,你可以使用 mix.standaloneSass(),这将大大改善你应用程序的构建时间。请记住:如果你选择了这条路线,Webpack 不会触及你的 CSS。它不会重写 url,复制资源(通过 file-loader),或者应用自动图像优化或 CSS 清理。如果这些特性对于你的应用程序来说是没有必要的,那么一定要使用这个选项而不是 mix.sass()

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

Note: 如果你正在使用 standaloneSass,在使用 npm run watch 进行文件更改时,你将需要使用下划线来前缀导入的文件,以将它们标记为依赖文件(例如,_header.scss、 _alert.scss)。如果不这样做,将导致 Sass 编译错误和/或额外的 CSS 文件。

本文章首发在 LearnKu.com 网站上。

本译文仅用于学习和交流目的,转载请务必注明文章译者、出处、和本文链接
我们的翻译工作遵照 CC 协议,如果我们的工作有侵犯到您的权益,请及时联系我们。

原文地址:https://learnku.com/docs/laravel-mix/4.0...

译文地址:https://learnku.com/docs/laravel-mix/4.0...

上一篇 下一篇
《L05 电商实战》
从零开发一个电商项目,功能包括电商后台、商品 & SKU 管理、购物车、订单管理、支付宝支付、微信支付、订单退款流程、优惠券等
《G01 Go 实战入门》
从零开始带你一步步开发一个 Go 博客项目,让你在最短的时间内学会使用 Go 进行编码。项目结构很大程度上参考了 Laravel。
贡献者:5
讨论数量: 0
发起讨论 只看当前版本


暂无话题~