在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

回答

相关问题