VueJsアプリ（Webpackエラー）でCSSをインポートできません

Question

私はthisとthisを読みましたが、私の場合と非常によく似ていますが、私の問題を解決できませんでした。

私のVueJsアプリでは、CSSファイルを正常にインポートできません。私のアプリは、彼らが提供するwebpack sampleのクローンです。しかし、importの文は.jsファイルであり、.vueではありません。

私のJSファイル

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

WebPACKのファイル（私は、彼らがutils.jsでローダーを作成することを学んだので、私は、CSSローダーをコメントしています）

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

最後にエラーが発生します：

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 

この

Answer 1

で私を助けてくれてありがとう私たちはFirebaseから供給されたスタイルシートを使用しますAuthenticating a Vue JS Application With Firebase UI

を参照してください。ただのindex.htmlに貼り付け：

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

私は

import 'firebaseui/dist/firebaseui.css'; 

を想像することはJSのようなCSSを実行しようとします。

Answer 2

あなたのwebpackのCSSローダー設定がありません