Webpack 的 stylus-loader 入门 [英] Getting Started With stylus-loader for 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 吗?不确定我是否理解正确.
I just added my stylus-loader, style-loader (as recommended by stylus-loader) and the loader { test: /\.styl$/, loader: 'style-loader!css-loader!stylus-loader' } to the webpack config. Now on my Main.js file I'm adding var css = require('!css!stylus!./Main.styl');. So, should I be seeing the compiled css in the html now ? Not sure if I'm getting this right.
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 = Main
index.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>
推荐答案
可以替换
var css = require('!css!stylus!./Main.styl');
与
var css = require('./Main.styl');
感谢您的设置.
默认情况下，CSS 将转换为 JavaScript 并包含在 JavaScript 包中.
The CSS will get converted into JavaScript and included in the JavaScript bundle by default.
我希望这会有所帮助.
这篇关于Webpack 的 stylus-loader 入门的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
