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')()]);Copy

单个方法调用允许您编译 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'Copy

示例#

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

webpack.mix.js

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

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

./resources/assets/sass/app.sass

$primary: grey

.app
    background: $primaryCopy

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

像往常一样编译它（npm run webpack），你会发现包含了以下内容的 ./public/css/app.css 文件：

.app {
    background: grey;
}Copy

插件选项#

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

• Node-Sass 选项: github.com/sass/node-sass#options
• Less 选项: github.com/webpack-contrib/less-lo...

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

Stylus 插件#

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

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

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

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

就是这个样子滴！

CSS url() 重写#

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

一个例子#

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

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

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);
}Copy

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

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

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

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

这样的好处是，当禁用 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']
        }
    }
});Copy

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

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

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

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

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

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

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

... 编译后，您将看到：

.example {
    color: red;
}Copy

漂亮！

PostCss 不适用 Sass/Less#

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

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

请注意，第三个参数是应该应用于你构建的 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');Copy

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

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

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

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