将触控笔添加到具有css模块的Webpack2应用程序

我有一个Webpack2应用程序，它使用

我现在只想开始使用

我想解决办法是更新我的webpack.config.js：

var path = require('path')
var webpack = require('webpack')
var ExtractTextPlugin = require('extract-text-webpack-plugin');

module.exports = {
  devtool: 'eval',
  entry: [
    'webpack-dev-server/client?http://localhost:3000',
    './src/index'
  ],
  output: {
    path: path.join(__dirname, 'dist'),
    filename: 'bundle.js'
  },
  module: {
    rules: [

      {
        test: /\.js$/,
        use: {
          loader: 'babel-loader'
        }
      },

      {
        test: /\.css$/,
        loader: 'style-loader'
      },

      {
        test: /\.css$/,
        loader: 'css-loader',
        query: {
          modules: true,
          localIdentName: '[name]__[local]___[hash:base64:5]'
        }
      },

    ]
  },
  resolve: {
    extensions: ['.js'],
    modules: [
      path.join(__dirname, 'src'),
      "node_modules"
    ]
  },

  plugins: [
    new ExtractTextPlugin( { filename: 'style.css', allChunks: true }),
  ],
}

当前webpack.config.js：

var path = require('path')
var webpack = require('webpack')
var ExtractTextPlugin = require('extract-text-webpack-plugin');

module.exports = {
  devtool: 'eval',
  entry: [
    'webpack-dev-server/client?http://localhost:3000',
    './src/index'
  ],
  output: {
    path: path.join(__dirname, 'dist'),
    filename: 'bundle.js'
  },
  module: {
    rules: [

      {
        test: /\.js$/,
        use: {
          loader: 'babel-loader'
        }
      },

      {
        test: /\.css$/,
        loader: 'style-loader'
      },

      {
        test: /\.css$/,
        loader: 'css-loader',
        query: {
          modules: true,
          localIdentName: '[name]__[local]___[hash:base64:5]'
        }
      },

    ]
  },
  resolve: {
    extensions: ['.js'],
    modules: [
      path.join(__dirname, 'src'),
      "node_modules"
    ]
  },

  plugins: [
    new ExtractTextPlugin( { filename: 'style.css', allChunks: true }),
  ],
}

因此，在配置中的

规则
数组中，我添加了：

  {
  test: /\.styl$/,
  use: [
    'style-loader',
    'css-loader',
    {
      loader: 'stylus-loader',
    },
  ],
},

编辑：然后我添加了：

var hook = require('css-modules-require-hook');
var stylus = require('stylus');

hook({
  extensions: ['.styl'],
  preprocessCss: function (css, filename) {
    return stylus(css)
      .set('filename', filename)
      .render();
  },
});

到webpack.config.js的顶部，但我不确定钩子是否应该放在webpack.config.js文件的顶部，然后是否需要调用webpack.config
模块内的钩子。导出

我添加了一个.styl文件：

logo/index.styl：

.img {
  width: 300px;
  height: 228px;
}

我是这样用的：

import styles from './index.styl'

function view() {
return (<img className={`${styles.img}`}
              src="src/img/logo_transparent_background.png"
            />)
}

module: {
  rules: [
    {
      test: /\.js$/,
      use: {
        loader: 'babel-loader'
      }
    },
    {
      test: /\.css$/,
      use: [
        'style-loader',
        {
          loader: 'css-loader',
          options: {
            modules: true,
            localIdentName: '[name]__[local]___[hash:base64:5]'
          }
        }
      ]
    },
    {
      test: /\.styl$/,
      use: [
        'style-loader',
        {
          loader: 'css-loader',
          options: {
            modules: true,
            localIdentName: '[name]__[local]___[hash:base64:5]'
          }
        },
        'stylus-loader'
      ],
    },
  ]
},

从“./index.styl”导入样式
函数视图（）{
返回（）
}

在开发人员控制台中检查的输出html显示：

<img class="undefined" src="src/img/logo_transparent_background.png">



你知道为什么吗？
你没有安装
stylus\u插件
，但是你不能安装它，因为npm注册表中没有这样的软件包。事实上，这应该是你可以使用的插件的一个例子（例如）。公平地说，这一点在上一篇文章中并不十分清楚，在GitHub的文章中也提到了这一点

所以只要删除这个不存在的插件，它就应该可以工作了

编辑
现在请回答另一个问题：为什么触笔模块不工作？

您还需要为
.styl
文件启用
css模块。在这个主题上，你也应该只有一个
.css
规则，并且在其中包括
样式加载器
和
css加载器
，否则它们将被单独应用，而不是按顺序应用。因此，您的
模块.规则应如下所示：

import styles from './index.styl'

function view() {
return (<img className={`${styles.img}`}
              src="src/img/logo_transparent_background.png"
            />)
}

module: {
  rules: [
    {
      test: /\.js$/,
      use: {
        loader: 'babel-loader'
      }
    },
    {
      test: /\.css$/,
      use: [
        'style-loader',
        {
          loader: 'css-loader',
          options: {
            modules: true,
            localIdentName: '[name]__[local]___[hash:base64:5]'
          }
        }
      ]
    },
    {
      test: /\.styl$/,
      use: [
        'style-loader',
        {
          loader: 'css-loader',
          options: {
            modules: true,
            localIdentName: '[name]__[local]___[hash:base64:5]'
          }
        },
        'stylus-loader'
      ],
    },
  ]
},

非常感谢。在我删除插件后，我不得不对我的问题做了很大的修改，所以这个问题现在解决了一个不同的问题（仍然与通过网页包让手写笔与css模块一起工作有关）编辑了修复手写笔模块的答案，而这个钩子不是必需的。非常感谢。作品