编辑：

Question

我正在尝试在CherryPy应用程序中设置Webpack（PostCSS）。 Webpack似乎正在正确生成内联样式，以下是我在webpack.config.js中的加载器

{ test: /\.css$/, loader: "style-loader!css-loader?modules&importLoaders=1!postcss-loader" }

当我运行'webpack'时，它似乎从我生成的output.js文件中的stylesheets / main.css文件中正确生成'test-class'样式....

exports.push([module.id, ".W_8vO1mwnWhjGJpClgHqm {\n /* color: $matt; */\n color: green;\n background: red;\n}\n", ""]);

然后，生成的output.js文件包含在main.html页面的脚本标记中。但是，当我尝试使用上面生成的'test-class'时，应用它对元素没有影响。在webpack文档中，它提到了以下内容

// in your modules just require the stylesheet // This has the side effect that a <style>-tag is added to the DOM. require("./stylesheet.css");

我不清楚这是指哪个模块。任何见解都会非常感激。

编辑：使用完整的webpack.config.js进行更新

```

const webpack = require('webpack');
const path = require('path');
//post css
var precss       = require('precss');
var autoprefixer = require('autoprefixer');


module.exports = {

  context: __dirname + '/app',
  entry: "./test.js",
  output: {
    filename: 'almostTest.js',
    path: path.join(__dirname, './static')
},
  module: {
    loaders: [
      {
        test: /\.js$/,
        loader: 'babel',
        exclude: /node_modules/,
        query: {
          presets: ['es2015']
        }
      },
      {
        test:   /\.css$/,
        loader: "style-loader!css-loader?modules&importLoaders=1!postcss-loader"
      }
    ]
  },
  postcss: [
              precss,
              autoprefixer({ browsers: ['last 2 versions']  })
            ]
}

```

Answer 1

要在Webpack捆绑的应用程序中使用CSS，您必须将import或require该文件放入您的条目文件中。

我采取的做法是创建一个index.css文件，该文件与index.js条目文件位于同一位置，然后从index.js文件中请求它。

然后，在index.css内，您需要所有其他应用CSS文件。

Here is an example of a Webpack starter I've written importing the .scss file和the main .scss file which imports all of my other components style sheets via native imports which scss-loader treats like requires.

否则，除非以某种方式将样式导入到您的条目文件中，否则您的应用将无法访问这些样式。

编辑：

我注意到您在modules=的加载程序查询中定义了css-loader，这将默认您的css定义为css-modules。 See here in the css-loader docs for more details

简答：从您的加载器定义中删除查询字符串，使其看起来像： css-loader?importLoaders=1您应该可以在应用中的任何位置查看自己的样式并访问它。

Webpack / PostCSS - 无法使用Webpack生成的内联样式中的类

1 个答案:

编辑：