從節點js模塊導入css

Question

我正在使用webpack，我可以「無錯誤地導入」css文件，但是css並未導出到最終產品中。

的WebPack摘錄：

module: { 
    loaders: [ 
     {test: /\.css$/,loader: 'css-loader'}, 
     {test: /\.scss$/,loader: ExtractTextPlugin.extract('css-loader!sass-loader')}, 
     {test: /\.js$/, loader: 'babel-loader', include}, 
     {test: /\.json$/, loader: 'json', include}, 
     {test: /\.jpe?g$|\.gif$|\.png$/i, loader: "file-loader" }, 
    ] 
    }, 

運行：

npm install hopscotch 

代碼：

import 'hopscotch/dist/css/hopscotch.css'; 

Answer 1

我沒有使用提取的CSS文件...

{test: /\.css$/,loader: 'css-loader'}, 

應該是：

{test: /\.css$/,loader: ExtractTextPlugin.extract('css-loader')}, 

Answer 2

除了你的答案，你還需要ExtractTextPlugin添加到plugins數組定義導出位置提取的CSS。

module: { 
    loaders: [ 
    {test: /\.css$/,loader: ExtractTextPlugin.extract('css-loader')}, 
    {test: /\.scss$/,loader: ExtractTextPlugin.extract('css-loader!sass-loader')}, 
    {test: /\.js$/, loader: 'babel-loader', include}, 
    {test: /\.json$/, loader: 'json', include}, 
    {test: /\.jpe?g$|\.gif$|\.png$/i, loader: "file-loader" }, 
    ] 
    plugins: [ 
    new ExtractTextPlugin({ filename: 'style.css' }), 
    ], 
},