Javascript - Can the 'import' keyword be used to import css?

Question

I may be a bit confused here but is there an equivelent of

require('../css/mystyles.css')

for the import command?

i.e: import '../css/mystyles.css

If no, why not?

Context:

Using webpack with vue and hoping to load css files in a manner consistent with the modules

Answer 1

You certainly can import css files with the import statement like this:

import "../css/mystyles.css.css"

In the webpack.config.js file you should add a rule to use ‘css-loader’ and ‘style-loader’ for .css files:

module.exports = {
    module:{
        rules:[
            {
                test:/\.css$/,
                use:['style-loader','css-loader']
            }
       ]
    }

Check out this article on Webpack loaders. It's very clear.