Webpack 的新手。我正在考虑将我的应用程序的 JS 部分迁移到它。但是,我不喜欢它处理 CSS 的方式。想保持简单并自己链接它们。不幸的是,文档不是很有帮助,搜索结果也是如此。
那么,我究竟需要什么?
- 从大量 .styl 文件到静态 .css 的手写笔编译。
- 将有三个静态样式表文件(入口点?),但与应用程序 JS 部分的入口点完全不同。
- 还有一些“监视”功能,当其中一个源 .styl 文件发生更改时会编译 css。
有没有人可以给我指明正确的方向,也许可以写一个配置?这甚至可以通过 Webpack 实现,还是我应该继续使用 Grunt?
感谢任何有用的答案。
最佳答案
想了解更多Webpack的细节可以引用这本在线书籍SurviveJS - Webpack ,它将带您了解与 Webpack 相关的大部分概念。
要完成您需要的工作,您可以从在项目的根目录中创建 webpack.config.js
开始,它可以是这样的:
var ExtractTextPlugin = require('extract-text-webpack-plugin');
module.exports = {
entry: './entry.js', // you application entry point
output: {
filename: 'bundle.js', // resulting bundle file
path: './public' // the output folder path
},
module: {
loaders: [
{
test: /\.styl$/,
loader: ExtractTextPlugin.extract("style", "!css!stylus") // plugin used to extract css file from your compiled `styl` files
}
]
},
plugins: [
new ExtractTextPlugin('style.css') // output css bundle
]
};
然后在你的 entry.js
文件中 require 你的手写笔文件 require('./style.styl');
不要忘记安装所需的加载器和插件
npm install --save-dev css-loader sass-loader style-loader extract-text-webpack-plugin
关于javascript - 使用 webpack 和 stylus 创建静态 css,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/39321870/