CODEWITHSUNDEEP
laravellaravel-mix
Siddharth
Siddharth

Reputation: 1769

@import not working in Laravel Mix

I'm having a style.css file which is having the following code:

@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');

and below some more css code. Now I'm trying to compile css file with Laravel Mix, so below is my webpack.mix.js file's code:

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

Now, after running npm run dev, instead of importing all those css files, it's below is the output which I get on compiled file 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');

So why is it not importing the code inside those files? What am I doing wrong?

Thanks to everyone in advance.

Upvotes: 2

Views: 5235

Answers (3)

N. Djokic
N. Djokic

Reputation: 1046

In the new version of mix it does not work so simple, so I had to import all partial scss files in additionalData property. Here is my example:

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');

Upvotes: 1

Luke Vincent
Luke Vincent

Reputation: 1323

I just discovered this and it's a bit annoying it's not mentioned in the docs although I suppose this is intended as a very basic operation.

A fairly full proof method is to just create a .scss file and import all the required scripts you're concatenating.

Then run this single .scss file through mix.sass()

e.g. make a file all.scss within resources/assets/custom/css

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

Then add to webpack.mix.js

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

mix.scss() will move any @import url() statements to the top of the file.

Upvotes: 0

ironchefbadass
ironchefbadass

Reputation: 129

I was running into a similar issue where my google fonts were not being imported.

Apparently @imports must come before anything else, except @charset:

The @import CSS at-rule is used to import style rules from other style sheets. These rules must precede all other types of rules, except @charset rules;

Source

So my solution was to ensure all my @imports (currently just Google fonts) are mixed FIRST:

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

Not sure if this 100% applies but it solved the issue for me.

Upvotes: 1

Related Questions