0

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

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

当我运行“webpack”时，它似乎从我的 stylesheets/main.css 文件中正确生成了“test-class”样式，内联在主要生成的 output.js 文件中......

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

然后将生成的 output.js 文件包含在我的 main.html 页面中的脚本标记中。但是，当我尝试使用上面生成的“测试类”时，应用它对元素没有影响。在 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']  })
            ]
}

```

4

1 回答 1

1

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

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

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

这是我编写的 Webpack 启动器示例，它导入 .scss 文件和主 .scss 文件，该文件通过 scss-loader 视为需要的本机导入来导入我的所有其他组件样式表。

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

编辑：

我注意到您已经modules=在加载程序查询中定义了css-loader这将默认您的 css 被定义为css-modules。有关更多详细信息，请参见 css-loader 文档中的此处

简短的回答：从加载器定义中删除查询字符串，使其看起来像： css-loader?importLoaders=1并且您应该能够看到您的样式并从应用程序的任何位置访问它。

于 2016-04-15T11:36:59.240 回答