Laravel-mix: Error when compiling css file

[rderimay]

Hi there,
(hoping not to open an issue for a simple error of me)

I'm getting an error when trying to compile a css file.
I am running npm run hot
on a js file containing import '../../../theme/index.css'

ERROR in ./theme/index.css Module parse failed: /Users/rd/Documents/Tchaka/Development/TchakaCM/code/web/theme/index.css Unexpected token (1:0) You may need an appropriate loader to handle this file type. | .el-form-item__content:before, .el-form-item__content:after { | display: table; | content: ""; @ ./resources/assets/js/app.js 5:0-34 @ multi (webpack)-dev-server/client?http://localhost:8080 webpack/hot/dev-server ./resources/assets/js/app.js

[adriaanzon]

I think it tries to interpret the css file as javascript.

You can simply use mix.combine() or mix.sass() for your styles.

If you want to be able to import css in your javascript, you should add a new rule for that in your webpack.config.js.

[JeffreyWay]

Yeah, right now, we don't have a rule for importing CSS into your JS files. I'm not against adding it, though, if a lot of people want to do it.

Until then, you can manually add it in, like this:

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

If lots of you want this added by default, "like" this reply.

[rderimay]

Thanks !