问题

当构建并开始应用程序的生产构建时，不会加载任何CSS 。检查开发工具，我可以看到大量错误和警告：

可能的罪魁祸首

在开发模式下启动应用程序时，我没有遇到任何这些问题。此外，其他资源（例如图像或字体）也可以正确加载。我们使用scss并在_app.tsx中导入全局样式表，如下所示：

import "../styles/globals.scss";

为了解决另一个库的问题，我们必须设置一个自定义的 webpack 配置：

module.exports = phase => ({
  webpack: (config, { isServer }) => {
    config.module.rules.push({
      test: /\.node$/,
      use: "node-loader"
    });

    config.module.rules.push({
      test: /\.(ts|js)x?$/,
      use: [
        {
          loader: "ts-loader",
          options: {
            transpileOnly: true,
            experimentalWatchApi: true,
            onlyCompileBundledFiles: true
          }
        }
      ],
      include: [path.resolve(__dirname, "node_modules/@private/")],
      exclude: [path.resolve(__dirname, "node_modules/@private/src/styleguide")]
    });

    if (!isServer) {
      config.module.rules.push({
        test: /\.s?[ac]ss$/i,
        use: [
          { loader: "style-loader" },
          { loader: "css-loader" },
          {
            loader: "resolve-url-loader",
            options: { …

我们在我们的应用程序中使用este.js dev stack,它使用webpack捆绑JS和CSS资产.Webpack 配置为webpack.optimize.UglifyJsPlugin在为生产环境构建时使用stylus-loader,以及生产环境的精确加载程序配置.如下:

ExtractTextPlugin.extract(
  'style-loader', 
  'css-loader!stylus-loader'
);

然后我有3个样式文件:

// app/animations.styl
@keyframes arrowBounce
  0%
    transform translateY(-20px)
  50%
    transform translateY(-10px)
  100%
    transform translateY(-20px)

@keyframes fadeIn
  0%
    opacity 0
  50%
    opacity 0
  100%
    opacity 1

// components/component1.styl
@require '../app/animations'

.component1
  &.-animated
    animation arrowBounce 2.5s infinite

// components/component2.styl
@require '../app/animations'

.component2
  &.-visible
    animation fadeIn 2s

在生成构建之后,两个关键帧动画都被重命名为a(可能是一些CSS缩小css-clean),因为你可以推断fadeIn覆盖,arrowBounce因为缩小后名称和优先级相同.

文件components/component1.styl和components/component2.styl被包含在他们的阵营组件文件[name].react.jsusing语句:

import 'components/component1.styl'; 
import 'components/component2.styl';

我疯了.尝试了许多不同的解决方案但没有真正有用.

我正在尝试将NODE_ENV注入一个sass文件中，因此我可以为dev / prod env提供不同的输出，并拥有一个内部具有类似条件的sass函数： @if (NODE_ENV == 'prod') {}

我的webpack.config看起来像这样：

module: {
    loaders: [{
        test: /\.scss$/,
        loader: "style-loader!raw-loader!sass-loader?includePaths[]=" + path.resolve(__dirname, "./node_modules/compass-mixins/lib")
    }]
}

我尝试将数据参数传递给加载程序，但没有任何效果。将不胜感激！

将React与webpack一起使用.通过一些文章,但大多数建议为每个组件调用单独的scss文件.但我想将所有css预编译为整个应用程序的单个文件,就像我们使用grunt/gulp一样.

我正在开发一个Angular 2应用程序,目前正在尝试用Webpack 2构建它(这是我第一次涉足Webpack).

我明白之间的差style-loader和to-string-loader,前者增加了CSS到DOM,后者产生一个字符串数组角为2至经由消耗styles特性.

我的问题是,我可以同时拥有两个吗？换句话说,如果我在文件中有全局样式site.css,那么在不改变组件样式(to-string-loader,css-loader)的行为的情况下,将这些样式与Webpack捆绑在一起的正确方法是什么？

只是要求或导入它们main.ts似乎不足以让Webpack弄清楚要做什么.

我有一个包含css的webpack加载器，我想添加另一个具有media属性的css链接进行打印

<link rel="stylesheet" media="print" href="file.js">

我试图修改样式加载器模块的addStyles.js，并在options对象中添加了media属性，以读取传递给样式加载器的查询参数

    loaders: [
  {
    test: "print.css",
    loaders: [
      'style-loader?media=print', // here i pass the print value to media  in options object
      'css-loader?sourceMap'
    ]
  },

这里的问题是，即使我为单个文件传递了媒体参数，它也会在所有包含的css文件中生成该文件，我该如何避免呢？

在这里您可以找到完整的装载机

  loaders: [
  {
    test: /\.global\.css$/,
    loaders: [
      'style-loader',
      'css-loader?sourceMap'
    ]
  },

  {
    test: /^((?!\.global).)*\.css$/,
    loaders: [
      'style-loader',
      'css-loader?modules&sourceMap&importLoaders=1&localIdentName=[name]__[local]___[hash:base64:5]'
    ]
  },

  { test: /\.woff(\?v=\d+\.\d+\.\d+)?$/, loader: 'url?limit=10000&mimetype=application/font-woff' },
  { test: /\.woff2(\?v=\d+\.\d+\.\d+)?$/, loader: 'url?limit=10000&mimetype=application/font-woff' },
  { test: /\.ttf(\?v=\d+\.\d+\.\d+)?$/, loader: 'url?limit=10000&mimetype=application/octet-stream' },
  { test: /\.eot(\?v=\d+\.\d+\.\d+)?$/, loader: 'file' },
  { test: /\.svg(\?v=\d+\.\d+\.\d+)?$/, loader: 'url?limit=10000&mimetype=image/svg+xml' …

我是Webpack（2）的新手，所以请原谅我到目前为止的简单理解。

在网络上的一些教程之后，我整理了工作package.json和webpack.babel.config.js文件。

本质上，我试图将SCSS转换为CSS，将Pug转换为HTML，将JS转换为Babel'd JS。

当我运行dist命令时，它会生成文件，但同时还会生成每个.scss和.html等的.js文件。希望下面的图像可以说明这一点：

import webpack from 'webpack';
import path from 'path';
import autoprefixer from 'autoprefixer';
import ExtractTextPlugin from 'extract-text-webpack-plugin';
import HtmlWebpackPlugin from 'html-webpack-plugin';

const extractHtml = new ExtractTextPlugin({
  filename: '[name].html'
});

const extractPug = new ExtractTextPlugin({
  filename: '[name].[contenthash].pug'
});

const extractScss = new ExtractTextPlugin({
  filename: '[name].[contenthash].css',
  allChunks: true
});

let config = {
  stats: {
    assets: false,
    colors: …