将手写笔添加到具有css模块的webpack 2应用程序中(Add stylus to a webpack 2 app which has css modules)

我有一个使用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显示：

有什么想法吗？

I have a webpack 2 app which uses css modules

I now just want to start using stylus as well.

I guess the solution is to update my webpack.config.js:

current 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 }), ], }

so into the rules array in the config, I added:

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

EDIT: I then added:

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

to the top of webpack.config.js as per css-modules-require-hook however I am unsure if the hook is supposed to go at the top of the webpack.config.js file and then if I need to somehow call the hook inside the webpack.config module.exports

I have added one .styl file:

logo/index.styl:

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

and I use it like this:

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

The output html inspected in the developer console shows:

Any ideas why?

最满意答案

您没有安装stylus_plugin ，但由于npm注册表中没有此类软件包，因此无法安装它。事实上，这应该是你可以使用的插件的一个例子（例如poststylus ）。公平地说，手写笔加载器自述文件中并不十分清楚，并且刚刚在GitHub问题中提到错误：无法找到模块'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' ], }, ] },

You don't have stylus_plugin installed, but you can't install it because there is no such package in the npm registry. And in fact that was supposed to be an example use of plugins you could use (e.g. 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.

So just remove this non-existing plugin and it should work.

Edit

Now to your other question: Why do the stylus modules not work?

Well you need to enable css-modules for your .styl files as well. And while on that subject you should also only have one .css rule and include both style-loader and css-loader in there, otherwise they will be applied separately, not in sequence. So your modules.rules should look like this:

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

更多推荐