在Webpack中使用CSS

我已經繼承了一個使用webpack的web應用程序。在我的應用程序，我有一個叫做「酒館」目錄下，它看起來像這樣：在Webpack中使用CSS

./pub 
    /styles 
     app.css 
    /images 
     brand.png

我都早上一直試圖通過失敗來的WebPack使用這些。在我webpack.config.js文件，我有以下幾點：

const path = require('path'); 

const projectRoot = path.resolve(__dirname, '../'); 

module.exports = { 
    entry: { 
    app: './src/index.js', 
    }, 
    output: { 
    path: path.resolve(__dirname, 'dist'), 
    filename: 'app.bundle.js' 
    }, 
    module: { 
    rules: [ 
     { 
     test: /\.css$/, 
     loader: "style-loader!css-loader" 
     }, 
     { 
     test: /\.(png|jpg|gif)$/, 
     use: [ 
      { 
      loader: 'url-loader', 
      options: { 
       limit: 8192 
      } 
      } 
     ] 
     }  
    ] 
    } 
};

然後，在我的index.js文件，我有以下幾點：

import logoImage from './public/images/brand.png'; 
require("css!./public/css/app.css");

當我運行webpack，我收到錯誤，說：

BREAKING CHANGE: It's no longer allowed to omit the '-loader' suffix when using loaders. 
       You need to specify 'css-loader' instead of 'css', 
       see https://webpack.js.org/guides/migrating/#automatic-loader-module-name-extension-removed

我不明白這個錯誤。當我看着它，然後看着我的webpack.config.js文件，它看起來像我使用css-loader。除此之外，一旦require語句正常工作，如何在我的網頁中使用樣式。我只是想通過一個web應用使用webpack，並且想要導入我的品牌和CSS，但我無法弄清楚。

來源

2017-07-03 user687554

你不需要css！在你需要聲明

require("css!./public/css/app.css");

你可以使用

require("./public/css/app.css");

因爲你與測試文件：

{ 
    test: /\.css$/, // <-- here 
    loader: "style-loader!css-loader" 
    },

或沒有你的WebPack配置規則

// No test in rules matched but you tell webpack 
// explicitly to use the css loader 
require("style-loader!css-loader!./public/css/app.css");

來源

2017-07-03 18:48:03 Joe

您的層次結構是pub/styles/app.css，但您在require中使用的位置是public/css/app.css。它看起來像你試圖從錯誤的位置調用你的CSS。

如果這不能解決您的問題，看看這個鏈接https://webpack.github.io/docs/stylesheets.html

頁面上的第一個步驟是安裝CSS-裝載機和配置，這可能是一個良好的開端。

來源

2017-07-03 18:54:24 Eric

在Webpack中使用CSS

回答

相關問題