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

Question

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

我现在只想开始使用手写笔.

我想解决方案是更新我的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文件:

标志/ 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).为了公平起见,手写笔加载器自述文件中并不十分清楚,并且刚刚在GitHub问题中提到错误:无法找到模块'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'
      ],
    },
  ]
},