Question

我有一个style.css文件，其中包含以下代码：

@import url("bootstrap.css");                       
@import url("icons.css");
@import url("plugins/revolutionslider.css");
@import url('https://fonts.googleapis.com/css?family=Raleway:300,400,500,600,700');
@import url('https://fonts.googleapis.com/css?family=Open+Sans:600,700');

以及更多css代码。现在我正在尝试使用Laravel Mix编译css文件，所以下面是我的webpack.mix.js文件的代码：

    mix.styles([
    'resources/assets/custom/css/style.css',
    'resources/assets/custom/css/colors/main.css'
], 'public/css/app.css');

现在，在运行npm run dev之后，不是导入所有这些css文件，而是下面是我在编译文件app.css上得到的输出

@import url("bootstrap");
@import url("icons.css");
@import url("plugins/revolutionslider.css");
@import url('https://fonts.googleapis.com/css?family=Raleway:300,400,500,600,700');
@import url('https://fonts.googleapis.com/css?family=Open+Sans:600,700');

那么为什么不在这些文件中导入代码呢？我做错了什么？

提前感谢所有人。

Answer 1

我遇到了类似的问题，我的谷歌字体没有被导入。

显然@imports必须先出现，除了@charset：

@import CSS at-rule用于从其他样式表导入样式规则。这些规则必须先于所有其他类型的规则，但@charset规则除外;

Source

所以我的解决方案是确保我的所有@imports（目前只是Google字体）首先混合：

mix.styles([
'public/css/vendor/google-fonts.css',
'public/css/vendor/bootstrap.min.css',
'public/css/custom.css'
], 'public/css/app.css')
.version();

不确定这100％是否适用，但它解决了我的问题。

Answer 2

我刚刚发现了这一点，虽然我认为这只是一个非常基本的操作，但文档中没有提到它，这有点令人讨厌。

一种相当充分的证明方法是只创建一个.scss文件，然后导入要连接的所有必需脚本。

然后通过.scss运行此单个mix.sass()文件

例如在all.scss内创建文件resources/assets/custom/css

@import 'style.css',
@import 'colors/main.css'

然后添加到webpack.mix.js

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

mix.scss()会将所有@import url()语句移到文件顶部。

Answer 3

在新版本的 mix 中它不是那么简单，所以我不得不在 additionalData 属性中导入所有部分 scss 文件。这是我的例子：

mix.webpackConfig({
    module: {
        rules: [
            {
                test: /\.scss$/,
                use: [
                    {
                        loader: "sass-loader",
                        options: {
                            additionalData: `@import "@/_variables.scss";
                            @import "@/_mixins.scss";
                            @import "@/_extends.scss";
                            @import "@/_general.scss";`
                        },
                    },
                ],
            }
        ]
    },
    resolve: {
        alias: {
            '@': path.resolve('resources/sass'),
            '~': path.resolve('/resources/js'),
            'Vue': 'vue/dist/vue.esm-bundler.js',
        }
    },
    output: {
        chunkFilename: '[name].js?id=[chunkhash]',
    },
});

mix.js('resources/js/app.js', 'public/js').vue()
    .sass('resources/sass/app.scss', 'public/css')
    .copyDirectory('resources/images', 'public/images');

@import在Laravel Mix中不起作用

3 个答案: