與webpack 2的css加載器遇到問題

Question

我在我的webpack將jsx文件換成comiples後出現此錯誤。我將2個樣式表導入到我的jsx中。但這是我的瀏覽器窗口上顯示的錯誤。

Module parse failed: C:\Users\pheon\Desktop\complete-intro-to-react\public\style.css Unexpected token (5:0) You may need an appropriate loader to handle this file type.

任何幫助將大大apprecuated！

我的WebPack配置文件是如下：

const path = require('path'); 

module.exports = { 
    context: __dirname, 
    entry: './js/ClientApp.js', 
    devtool: 'eval', 
    output: { 
    path: path.join(__dirname, '/public'), 
    filename: 'bundle.js', 
    publicPath: '/public/' 
    }, 
    devServer: { 
    publicPath: '/public/', 
    historyApiFallback: true 
    }, 
    resolve: { 
    extensions: ['.js', '.json'] 
    }, 
    stats: { 
    colors: true, 
    reasons: true, 
    chunks: true 
    }, 
    module: { 
    rules: [ 
     { 
     enforce: 'pre', 
     test: /\.js$/, 
     loader: 'eslint-loader', 
     exclude: /node_modules/ 
     }, 
     { 
     test: /\.json$/, 
     loader: 'json-loader' 
     }, 
     { 
     include: path.resolve(__dirname, 'js'), 
     test: /\.js$/, 
     loader: 'babel-loader' 
     }, 
     { 
     test: /\.css$/, 
     use: [ 
      'style-loader', 
      { 
      loader: 'css-loader', 
      options: { 
       url: false 
      } 
      } 
     ] 
     } 
    ] 
    } 
}; 

的style.css：

* { 
    box-sizing: border-box;; 
} 

html { 
    font-family: Helvetica Neue, Helvetica, sans-serif; 
} 

.app { 
    position: relative; 
    width: 100%; 
    height: 100vh; 
    background-image: url(/public/img/3.jpg); 
    background-size: cover; 
    background-position: center; 
    display: flex; 
    align-items: center; 
    justify-content: center; 
    text-align: center; 
    color: #333; 
} 

.app > h1 { 
    color: white; 
} 

.landing { 
    background-color: rgba(220, 220, 220, .7); 
    padding: 15px 30px; 
    border-radius: 5px; 
} 

.landing > h1 { 
    color: #B10DC9; 
    font-family: Skia; 
    font-weight: normal; 
} 

.landing > input, .landing > form > input { 
    width: 100%; 
    padding: 10px; 
    border-radius: 4px; 
} 

.landing > form { 
    width: 100%; 
    min-width: 300px; 
} 

.landing > a { 
    margin-top: 15px; 
    padding: 10px 40px; 
    background-color: #333; 
    color: #fafafa; 
    border-color: transparent; 
    display: inline-block; 
    text-decoration: none; 
    border-radius: 4px; 
} 

.landing > a:hover, .landing > a:focus { 
    background-color: #666; 
} 

.landing > a:active { 
    background-color: #fafafa; 
    color: #333; 
    border-color: #333; 
} 

.details, .search { 
    position: absolute; 
    top: 15px; 
    left: 15px; 
    right: 15px; 
    bottom: 15px; 
    overflow-y: scroll; 
    background-color: rgba(220, 220, 220, .8); 
    padding: 15px 30px; 
    border-radius: 5px; 
} 

pre { 
    text-align: left; 
} 

.search > div > a { 
    width: 30%; 
    height: 0; 
    padding-bottom: 19.8%; 
    overflow: hidden; 
    margin-bottom: 3%; 
    border: 2px solid #333; 
    border-radius: 4px; 
    color: #333; 
    text-decoration: none; 
} 

.search > div > a { 
    width: 100%; 
    padding-bottom: 70%; 
    height: 0; 
    overflow: inherit; 
    margin-bottom: inherit;; 
    border: none; 
    border-radius: inherit; 
} 

.show-card { 
    float: left; 
    margin-right: 2%; 
    border: 2px solid #333; 
    border-radius: 4px; 
    text-align: left; 
    width: 32%; 
    height: 0; 
    padding-bottom: 19.8%; 
    overflow: hidden; 
    margin-bottom: 2%; 
} 

.show-card:nth-child(3n), .search > div > a:nth-child(3n) > .show-card { 
    margin-right: 0; 
} 

.show-card > img { 
    width: 46%; 
    float: left; 
} 

.show-card > div{ 
    display: block; 
    float: right; 
    width: 52%; 
    overflow-y: scroll; 
} 

.show-card > div > h3 { 
    margin-top: 0; 
    margin-bottom: 5px; 
} 

.show-card > div > h4 { 
    margin-top: 0; 
    margin-bottom: 5px; 
    color: #666; 
    font-size: 13px; 
} 

.show-card > div > p { 
    margin: 0; 
    font-size: 13px; 
} 

.search > header + div { 
    margin-top: 25px; 
} 

header { 
    z-index: 10; 
    position: fixed; 
    display: flex; 
    align-items: center; 
    justify-content: space-between; 
    text-align: center; 
    top: 0; 
    left: 0; 
    width: 100%; 
    overflow: hidden; 
    background-color: #fafafa; 
    padding: 8px 30px; 
} 

header > h1 { 
    font-family: Skia; 
    font-weight: normal; 
    color: #B10DC9; 
    margin: 0; 
} 

header > h1 > a { 
    color: #B10DC9; 
    text-decoration: none; 
} 

header > h2 { 
    font-weight: normal; 
    margin: 0; 
} 

header > h2 > a { 
    color: #aaa; 
    text-decoration: none; 
} 

.details > div { 
    width: 100%; 
    height: 0; 
    padding-bottom: 56.25%; 
    position: relative; 
} 

.details > div > iframe { 
    position: absolute; 
    top: 0; 
    left: 0; 
    width: 100%; 
    height: 100%; 
} 

header > input { 
    min-width: 250px; 
    max-width: 350px; 
    width: 33%; 
    padding: 4px; 
    border: 2px solid #ccc; 
    border-radius: 4px; 
} 

.details > section > img, .details > section > h3 { 
    width: 8%; 
} 

.details > section > img[alt] { 
    -webkit-animation: spin 4s infinite linear; 
    -moz-animation: spin 4s infinite linear; 
    animation: spin 4s infinite linear; 
} 

@-moz-keyframes spin { 
    from { -moz-transform: rotate(0deg); } 
    to { -moz-transform: rotate(360deg); } 
} 
@-webkit-keyframes spin { 
    from { -webkit-transform: rotate(0deg); } 
    to { -webkit-transform: rotate(360deg); } 
} 
@keyframes spin { 
    from {transform:rotate(0deg);} 
    to {transform:rotate(360deg);} 
} 

.details > section > * { 
    margin: 0 1%; 
} 

.details > section { 
    display: flex; 
    justify-content: space-around; 
    align-items: center; 
    margin-bottom: 25px; 
} 

.details > header + section { 
    margin-top: 25px; 
} 

Answer 1

好了，發現了，如果你正在運行的WebPack開發服務器，您需要重新啓動服務器如果你改變你的配置文件。