我可以在webpack中创建sass/less/css而不需要在我的JS中使用它们吗?
我目前有一些反应组件& sass正在用webpack成功构建。我还有一个主要的sass文件,可以通过一个gulp任务构建。我可以在webpack中创建sass/less/css而不需要在我的JS中使用它们吗?
我想只需要使用这些技术之一,是否可以将sass编译为css而无需关联入门文件中的sass文件?
这里试图用WebpackExtractTextPlugin
运行的WebPack后webpack.config.js
entry_object[build_css + "style.css"] = static_scss + "style.scss";
module.exports = {
entry: entry_object,
output: {
path: './',
filename: '[name]'
},
{
test: /\.scss$/,
include: /.scss$/,
loader: ExtractTextPlugin.extract("style-loader", "css!sass")
}
plugins: [
new ExtractTextPlugin("[name]")
]
为例,style.css的资产看起来是这样的:
/******/ (function(modules) { // webpackBootstrap
/******/ // The module cache
/******/ var installedModules = {};
/******/
/******/ // The require function
/******/ function __webpack_require__(moduleId) {
...
我解决了这个在@bebraw帮助下
正如他在评论中所说的,当使用ExtractTextPlugin时,webpack将创建一个虚拟javascript文件,并跟随output.filename中的模式。因为我将ExtractTextPlugin的输出文件设置为与output.filename中的名称完全相同,所以它只输出javascript文件。通过确保output.filename和ExtractTextPlugin输出文件名的名称不同,我能够将我的sass加载到css中。
这里的webpack.config.js
entry_object[build_css + "style"] = static_scss + "style.scss";
module.exports = {
entry: entry_object,
output: {
path: './',
filename: '[name]'
},
{
test: /\.scss$/,
include: /.scss$/,
loader: ExtractTextPlugin.extract("style-loader", "css!sass")
}
plugins: [
new ExtractTextPlugin("[name].css")
]
你能告诉我你的''webpack.config.js''吗?我有点卡在这个。 –
我的webpack配置是我发布的snippit –
您将需要的WebPack或吞掉到transpile SASS到CSS的最后一个例子,误足够之一,就是你的要求? – QoP
这是某种限制吗?我通常有一些索引文件,导入所有我的风格相关的东西。 – azium
看起来像这就是你要找的虽然https://github.com/peerigon/extract-loader#examples – azium