Webpack的手写装载机入门
好吧，所以(新的)：
我刚刚将我的stylus-loader、style-loader (按照stylus-loader的建议)和加载器{ test: /\.styl$/, loader: 'style-loader!css-loader!stylus-loader' }添加到webpack配置中。现在，在我的Main.js文件中，我要添加var css = require('!css!stylus!./Main.styl');。那么，我现在应该在html中看到编译好的css吗？不知道我是不是做对了。
webpack.config.js
webpackConfig = {
context: __dirname,
entry: {
app: ['webpack/hot/dev-server','./index.js']
},
output: {
path: __dirname,
filename: 'bundle.js'
},
module: {
loaders: [
{ test: /\.js$/, exclude: /node_modules/, loader: 'babel-loader'},
{ test: /\.styl$/, loader: 'style-loader!css-loader!stylus-loader' }
]
}
}
module.exports = webpackConfig;index.js
var React = require('react');
var Main = require('./App/Components/Main');
class App extends React.Component{
render(){
return (
<Main />
)
}
}
React.render(<App />, document.getElementById('main'));Main.js
'use strict'
import React from 'react';
import ReactCanvas from 'react-canvas';
var css = require('!css!stylus!./Main.styl');
var {
Surface
} = ReactCanvas;
class Main extends React.Component{
constructor() {
super();
this.size = document.getElementById('main').getBoundingClientRect()
}
render() {
return (
<Surface top={0} left={0} width={this.size.width} height={this.size.height}>
</Surface>
)
}
}
module.exports = Mainindex.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>React Canvas</title>
</head>
<body>
<header>
<h1>React Canvas</h1>
</header>
<div id="main"></div>
<script src="http://localhost:8080/webpack-dev-server.js"></script>
<script src="bundle.js"></script>
</body>
</html>回答 3
Stack Overflow用户
发布于 2015-05-03 09:57:43
你可以代替
var css = require('!css!stylus!./Main.styl');使用
var css = require('./Main.styl');多亏了你的安排。
默认情况下，CSS将被转换为JavaScript并包含在JavaScript包中。
我希望这能帮到你。
Stack Overflow用户
发布于 2016-01-28 15:53:54
检查我的配置
https://github.com/crapthings/postcss-test
https://github.com/crapthings/postcss-test/blob/master/webpack.config.js
var poststylus = require('poststylus')
module.exports = {
cache: true,
context: __dirname + '/app',
entry: './index.js',
output: {
path: __dirname + '/app',
filename: 'bundle.js'
},
module: {
loaders: [
{ test: /\.js$/, loader: 'babel', exclude: /node_modules/, query: { presets: ['es2015'], plugins: ['add-module-exports'] } },
{ test: /\.html$/, loader: 'html', exclude: /node_modules/ },
{ test: /\.css$/, loader: 'style!css!postcss', exclude: /node_modules/ },
{ test: /\.styl$/, loader: 'style!css!stylus', exclude: /node_modules/ }
]
},
stylus: {
use: [poststylus(['autoprefixer', 'postcss-short', 'postcss-sorting', 'postcss-cssnext', 'rucksack-css'])]
}
}https://github.com/crapthings/postcss-test/blob/master/app/index.js
require('style!./test.styl')我可以让手写笔和postcss以内联方式工作。
但我想不出如何使bundle.css
<link rel=stylesheet />Stack Overflow用户
发布于 2016-03-01 21:21:17
你拼错了“排除”和"exculde“。
顺便说一下(https://github.com/seaneking/poststylus)：
“不幸的是，PostStylus用来传回后处理的css的Stylus事件不接受回调，所以在对该bug进行上游修补之前，PostStylus不能处理异步PostCSS处理。”
我必须为使用LostCSS (PostCSS网格)创建单独的文件，我只使用网格导入了这些文件(每个组件都有自己的style.styl文件和lost.css文件)。为我工作过。
https://stackoverflow.com/questions/30006607
复制相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号