MaxEckel's avatar

[Mix] Laravel 5.4 | Third-Party css unexpected token - loader

Hey Guys,

i'm in the progress migrating my Project to Laravel 5.4 and Mix.

I'm using the Quill-Editor and getting the following error:

node_modules\quill\dist\quill.snow.css Unexpected token (7:0)
You may need an appropriate loader to handle this file type.
|  * Copyright (c) 2013, salesforce.com
|  */
| .ql-container {
|   box-sizing: border-box;
|   font-family: Helvetica, Arial, sans-serif;

 @ ./~/babel-loader/lib?{"cacheDirectory":true,"presets":[["es2015",{"modules":false}]]}!./~/vue-loader/lib/selector.js?type=script&index=0!./~/vue-quill-editor/editor.vue 6:0
-36
 @ ./~/vue-quill-editor/editor.vue
 @ ./~/vue-quill-editor/index.js
 @ ./~/babel-loader/lib?{"cacheDirectory":true,"presets":[["es2015",{"modules":false}]]}!./~/vue-loader/lib/selector.js?type=script&index=0!./resources/assets/js/components/Component.vue
 @ ./resources/assets/js/components/Component.vue
 @ ./resources/assets/js/app.js
 @ multi ./resources/assets/js/app.js ./resources/assets/sass/app.scss

I already got that kind of error with elixir and solved it by adding the style-loader and css-loader to the webpack.config

I tried to do the same with Mix and added:

{ 
            test: /\.css$/,
            loader: "style-loader!css-loader" 
        },

(which worked before, both loaders are installed via npm)

Do you have any idea? Am i doing something completly wrong?

0 likes
4 replies
MaxEckel's avatar
MaxEckel
OP
9 years ago
Best Answer
Level 8

Got it working, like its explained in the Mix "Docs" here:

https://github.com/JeffreyWay/laravel-mix/blob/master/docs/quick-webpack-configuration.md

At first i copied the webpack.config.js as explained in my initial question. That didn't work, to fix the error i added the loader to my webpack.mix.js like so:

mix.webpackConfig({
    module: {
        rules: [
            { 
                test: /\.css$/,
                loader: "style-loader!css-loader" 
            },
        ]
    }
});

Now it compiles just fine.

1 like

Please or to participate in this conversation.