webpack - 将手写笔添加到具有 css 模块的 webpack 2 应用程序

Question

我有一个使用 css modules 的 webpack 2 应用程序

我现在只想开始使用stylus也是。

我想解决方案是更新我的 webpack.config.js:

当前的 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 }),
  ],
}

所以进入 rules配置中的数组，我添加了:

  {
  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();
  },
});

根据 css-modules-require-hook 到 webpack.config.js 的顶部但是我不确定钩子(Hook)是否应该放在 webpack.config.js 文件的顶部，然后我是否需要以某种方式调用 webpack.config 中的钩子(Hook) module.exports

我添加了一个 .styl 文件:

标志/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"
            />)
}

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

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

任何想法为什么？

Answer 1

你没有 stylus_plugin已安装，但您无法安装它，因为 npm 注册表中没有这样的包。事实上，这应该是您可以使用的插件的示例使用(例如 poststylus )。公平地说，stylus-loader Readme 中并不太清楚。并且刚刚在 GitHub 问题 Error: Cannot find module 'stylus_plugin' #155 中提到过.

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

编辑

现在回答您的另一个问题:为什么手写笔模块不起作用？

那么你需要启用css-modules为您的.styl文件也是如此。在这个主题上，你也应该只有一个 .css规则并包括style-loader和 css-loader在那里，否则它们将单独应用，而不是按顺序应用。所以你的modules.rules应该是这样的:

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'
      ],
    },
  ]
},