我可以在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) { 

...

來源

2016-04-21 ex-zac-tly

您將需要的WebPack或吞掉到transpile SASS到CSS的最後一個例子，誤足夠之一，就是你的要求？ – QoP

這是某種限制嗎？我通常有一些索引文件，導入所有我的風格相關的東西。 – azium

看起來像這就是你要找的雖然https://github.com/peerigon/extract-loader#examples – azium

我解決了這個在@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") 
    ]

來源

2016-04-24 16:55:24

你能告訴我你的''webpack.config.js''嗎？我有點卡在這個。 –

我的webpack配置是我發佈的snippit –

我可以在webpack中創建sass/less/css而不需要在我的JS中使用它們嗎？

回答

相關問題