Unable to import css in VueJs app (Webpack errors)

Question

I have read this and this which are very similar to my case but didn't help to solve my problem.

In my VueJs app, I try to import a CSS file without success. My app is a clone of this webpack sample they provide. But my import statement in is .js file, not a .vue one.

my Js file

import * as firebase from 'firebase';
import * as firebaseui from 'firebaseui';
import 'firebaseui/dist/firebaseui.css';

the webpack file (I have commented the css loader because I've learnt that they create loader in utils.js)

'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'
        ]
      }*/
    ]
  }
}

utils.js

'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
}

Finally the error I get:

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

Thanks for helping me with this

@GuyS if I require like so `require('firebaseui/dist/firebaseui.css');` I get the same error — ValLeNain, Nov 19 '17 at 18:55

score 2 · Answer 1 · answered Nov 20 '17 at 03:51

See Authenticating a Vue JS Application With Firebase UI

We’ll use the style sheet supplied by Firebase. Just paste it in the index.html:

<link type="text/css" rel="stylesheet" href="node_modules/firebaseui/dist/firebaseui.css" />

I imagine

import 'firebaseui/dist/firebaseui.css';

will try to run the css like js.

score 0 · Answer 2 · answered Jan 02 '18 at 22:46

0

your missing the css-loader config in your webpack

answered Jan 02 '18 at 22:46

Stephane Paul

340
5
4

Unable to import css in VueJs app (Webpack errors)

2 Answers2