title: Unable to import css in VueJs app (Webpack errors)
body: <p>I have read <a href="https://github.com/webpack-contrib/css-loader/issues/362" rel="nofollow noreferrer">this</a> and <a href="https://stackoverflow.com/questions/37031123/why-am-i-not-being-able-to-compile-sass-with-webpack">this</a> which are very similar to my case but didn't help to solve my problem.</p>
  
  <p>In my VueJs app, I try to import a CSS file without success. My app is a clone of this <a href="https://github.com/vuejs-templates/webpack" rel="nofollow noreferrer">webpack sample</a> they provide. But my <code>import</code> statement in is <code>.js</code> file, not a <code>.vue</code> one.</p>
  
  <p>my Js file</p>
  
  <pre><code>import * as firebase from 'firebase';
  import * as firebaseui from 'firebaseui';
  import 'firebaseui/dist/firebaseui.css';
  </code></pre>
  
  <p>the webpack file (I have commented the css loader because I've learnt that they create loader in <code>utils.js</code>)</p>
  
  <pre><code>'use strict'
  const path = require('path')
  const utils = require('./utils')
  const config = require('../config')
  const vueLoaderConfig = require('./vue-loader.conf')
  
  function resolve (dir) {
    return path.join(__dirname, '..', dir)
  }
  
  module.exports = {
    entry: {
      app: './src/main.js'
    },
    output: {
      path: config.build.assetsRoot,
      filename: '[name].js',
      publicPath: process.env.NODE_ENV === 'production'
        ? config.build.assetsPublicPath
        : config.dev.assetsPublicPath
    },
    resolve: {
      extensions: ['.js', '.vue', '.json'],
      alias: {
        'vue$': 'vue/dist/vue.esm.js',
        '@': resolve('src'),
      }
    },
    module: {
      rules: [
        {
          test: /\.(js|vue)$/,
          loader: 'eslint-loader',
          enforce: 'pre',
          include: [resolve('src'), resolve('test')],
          options: {
            formatter: require('eslint-friendly-formatter')
          }
        },
        {
          test: /\.vue$/,
          loader: 'vue-loader',
          options: vueLoaderConfig
        },
        {
          test: /\.js$/,
          loader: 'babel-loader',
          include: [resolve('src'), resolve('test')]
        },
        {
          test: /\.(png|jpe?g|gif|svg)(\?.*)?$/,
          loader: 'url-loader',
          options: {
            limit: 10000,
            name: utils.assetsPath('img/[name].[hash:7].[ext]')
          }
        },
        {
          test: /\.(mp4|webm|ogg|mp3|wav|flac|aac)(\?.*)?$/,
          loader: 'url-loader',
          options: {
            limit: 10000,
            name: utils.assetsPath('media/[name].[hash:7].[ext]')
          }
        },
        {
          test: /\.(woff2?|eot|ttf|otf)(\?.*)?$/,
          loader: 'url-loader',
          options: {
            limit: 10000,
            name: utils.assetsPath('fonts/[name].[hash:7].[ext]')
          }
        },
        /*{
          test: /\.css$/,
          loaders: [
            'style-loader',
            'css-loader'
          ]
        }*/
      ]
    }
  }
  </code></pre>
  
  <p><code>utils.js</code></p>
  
  <pre><code>'use strict'
  const path = require('path')
  const config = require('../config')
  const ExtractTextPlugin = require('extract-text-webpack-plugin')
  
  exports.assetsPath = function (_path) {
    const assetsSubDirectory = process.env.NODE_ENV === 'production'
      ? config.build.assetsSubDirectory
      : config.dev.assetsSubDirectory
    return path.posix.join(assetsSubDirectory, _path)
  }
  
  exports.cssLoaders = function (options) {
    options = options || {}
  
    const cssLoader = {
      loader: 'css-loader',
      options: {
        minimize: process.env.NODE_ENV === 'production',
        sourceMap: options.sourceMap
      }
    }
  
    // generate loader string to be used with extract text plugin
    function generateLoaders (loader, loaderOptions) {
      const loaders = [cssLoader]
      if (loader) {
        loaders.push({
          loader: loader + '-loader',
          options: Object.assign({}, loaderOptions, {
            sourceMap: options.sourceMap
          })
        })
      }
  
      // Extract CSS when that option is specified
      // (which is the case during production build)
      if (options.extract) {
        return ExtractTextPlugin.extract({
          use: loaders,
          fallback: 'vue-style-loader'
        })
      } else {
        return ['vue-style-loader'].concat(loaders)
      }
    }
  
    // https://vue-loader.vuejs.org/en/configurations/extract-css.html
    return {
      css: generateLoaders(),
      postcss: generateLoaders(),
      less: generateLoaders('less'),
      sass: generateLoaders('sass', { indentedSyntax: true }),
      scss: generateLoaders('sass'),
      stylus: generateLoaders('stylus'),
      styl: generateLoaders('stylus')
    }
  }
  
  // Generate loaders for standalone style files (outside of .vue)
  exports.styleLoaders = function (options) {
    const output = []
    const loaders = exports.cssLoaders(options)
    for (const extension in loaders) {
      const loader = loaders[extension]
      output.push({
        test: new RegExp('\\.' + extension + '$'),
        use: loader
      })
    }
    return output
  }
  </code></pre>
  
  <p>Finally the error I get:</p>
  
  <pre><code>Module build failed: Unknown word (5:1)
  
    3 | // load the styles
    4 | var content = require("!!../../css-loader/index.js?{\"minimize\":false,\"sourceMap\":false}!./firebaseui.css");
  &gt; 5 | if(typeof content === 'string') content = [[module.id, content, '']];
      | ^
    6 | if(content.locals) module.exports = content.locals;
    7 | // add the styles to the DOM
    8 | var update = require("!../../vue-style-loader/lib/addStylesClient.js")("45e43535", content, false);
  
  
   @ ./node_modules/firebaseui/dist/firebaseui.css 4:14-137 18:2-22:4 19:20-143
   @ ./src/firebase/auth.js
   @ ./src/firebase/index.js
   @ ./src/main.js
   @ multi ./build/dev-client ./src/main.js
  </code></pre>
  
  <p>Thanks for helping me with this</p>