修改

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文件：

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

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

1 个答案:

修改