webpackでcssをインポートするには？

Question

TWO PARTの質問

私の手順は：

1. 作成した空のフォルダ
2. は、フォルダと実行にcmd
3. ナビゲートをオープンしましnpm init -f
4. 実行vue init webpack
5. 実行npm install
6. NPM i bootstrap-vue
7. NPM run dev

私main.js：

import Vue from 'vue' 
import App from './App' 
import router from './router' 

import BootstrapVue from 'bootstrap-vue' 
import 'bootstrap/dist/css/bootstrap.css' 
import 'bootstrap-vue/dist/bootstrap-vue.css' 

Vue.use(BootstrapVue); 

Vue.config.productionTip = false 

/* eslint-disable no-new */ 
new Vue({ 
    el: '#app', 
    router, 
    render: h => h(App) 
}) 

webpack.base.conf.js：

var path = require('path') 
var utils = require('./utils') 
var config = require('../config') 
var 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: { 
      '@': resolve('src'), 
     } 
    }, 
    module: { 
     rules: [{ 
       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]') 
       } 
      }, 
      { //this rule will only be used for any vendors 
       test: /\.css$/, 
       loaders: ['style-loader', 'css-loader'], 
       include: [/node_modules/] 
      }, 
      { 
       test: /\.css$/, 
       loaders: ['to-string-loader', 'css-loader'], 
       exclude: [/node_modules/] //add this line so we ignore css coming from node_modules 
      }, 

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

私はこれを実行したときに私が手：

Module build failed: Unknown word (5:1)

パート2：

いくつかの時間は、ローダー・パッケージをインストールし、これに私のmain.jsを変ることにより、上記の問題への解決策を見つけた後：

import Vue from 'vue' 
import App from './App' 
import router from './router' 


import '!style-loader!css-loader!bootstrap/dist/css/bootstrap.css'; 


/* eslint-disable no-new */ 
new Vue({ 
    el: '#app', 
    router, 
    render: h => h(App) 
}) 

これを解決私の最初の問題BUT：

私はローカルのCSSファイルを追加しようとすると、そうKE：

import Vue from 'vue' 
import App from './App' 
import router from './router' 


import '!style-loader!css-loader!bootstrap/dist/css/bootstrap.css'; 
import './content/bootstrapGrid.css' 

/* eslint-disable no-new */ 
new Vue({ 
    el: '#app', 
    router, 
    render: h => h(App) 
}) 

私は再び同じエラーを取得：

Module build failed: Unknown word (5:1)

私はWebPACKの、VUEと全体のSPAに新しいです。 これでしばらくの間、私は何かが見当たりません。

Answer 1

！CSS-ローダー

これはプレーンなCSSローダーです。内部のリソースを解釈するCSSコードを返しますが、ページに追加しません。 このローダーの@importとurl（...）はrequire（）のように解釈され、解決されます。

！スタイル・ローダー

このローダーは、またはタグを注入することにより、DOMにCSSを追加します。 aを注入するには、cssファイルの内容を取得してから注入する必要があります。

require("style!raw!./file.css"); 
// => add rules in file.css to document 

しかし、それだけではなく、生のCSSを有していると、あなたのCSSファイル内のすべてのリソースを解釈するよう、CSS-ローダーとそれを組み合わせることをお勧めします。 （Check）

require("style!css!./file.css"); 
// => add rules in file.css to document 

あなたのcssファイルに追加したい場合は、ファイル・ローダーを使用することができ、そのために、あなたは、最初にそのファイルへのURLを持っている必要があります。

require("style/url!file!./file.css"); 
// => add a <link rel="stylesheet"> to file.css to document 

希望します。 css-loaderは、このhere