将手写笔添加到具有 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 的顶部但是我不确定钩子是否应该放在 webpack.config.js 文件的顶部然后如果我需要以某种方式调用 webpack.config module.exports

中的钩子

我添加了一个 .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"
            />)
}

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

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

知道为什么吗？

Answer 1

您没有安装stylus_plugin，但是您无法安装它，因为npm 注册表中没有这样的包。事实上，这应该是您可以使用的插件的示例使用（例如 poststylus). To be fair that wasn't quite clear from the stylus-loader Readme and has just been mentioned in the GitHub issue Error: Cannot find module 'stylus_plugin' #155.

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

编辑

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

那么您还需要为 .styl 文件启用 css-modules。在该主题上，您也应该只有一个 .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'
      ],
    },
  ]
},

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

Add stylus to a webpack 2 app which has css modules

webpack

stylus

webpack-2

css-modules

编辑