如何將所有的sass文件與webpack捆綁在一起？

我正在使用webpack來構建我的es6應用程序。不幸的是，我無法找到如何將所有SASS文件打包成一個文件，以便從主html頁面導入。如何將所有的sass文件與webpack捆綁在一起？

目前，我這樣進行編譯青菜在我的JavaScript訪問量：

require("./../scss/main.scss")

使用以下裝載機：

{ 
    test: /\.scss$/, 
    loaders: ["style", "css", "sass"] 
}

但這不是我想要的。我希望爲文件main.scss輸入一個條目，然後將它放在項目的某個位置，例如public文件夾，其中的index.html文件也位於該文件夾中，並且可以從中導入該文件。

有人嗎？

來源

2016-07-06 nourdine

您必須使用extract-text-html插件來執行此操作。在你webpack.config.js設置此：

var webpack = require('webpack'), 


ExtractTextPlugin = require("extract-text-webpack-plugin"), 
    HtmlWebpackPlugin = require('html-webpack-plugin'), 
    path = require('path'), 
    srcPath = path.join(__dirname, 'src'), 
    sassLoaders = [ 
    "css-loader", 
    "autoprefixer-loader?browsers=last 2 version", 
    "sass-loader?indentedSyntax=sass&includePaths[]=" + path.resolve(__dirname, "./src"), 
    ];

對於加載器和插件我建議：

module: { 
    loaders: [ 
     {test: /\.scss$/, loaders: ["style", "css", "sass"]}, 
     {test: /\.css$/, loader: ExtractTextPlugin.extract("style-loader", "css-loader")}, 
     {test : /\.woff|\.woff2|\.svg|.eot|\.ttf|\.png/, loader : 'url?prefix=font/&limit=10000&name=/assets/fonts/[name].[ext]' 
     } 
    ] 
    }, 
    plugins: [ 
    new ExtractTextPlugin("main.css"), 
    new webpack.NoErrorsPlugin(), 
    ]

編輯：當您使用ExtractTextPlugin它會從SASS放置一個css將所有文件捆綁在一起輸出文件夾中。您可以將名稱上的插件，如：new ExtractTextPlugin("main.css")

輸出

output: { 
    path: path.resolve(__dirname, "./public"), 
    },

我建議你也檢查HtmlWebpackPlugin注入自動對HTML CSS和JS和CommonsChunkPlugin這樣你就可以生成所有libs到另一個分離的js和你所有的代碼中，這在調試時確實節省了一些時間。

來源

2016-07-06 18:46:54

我在哪裏指定入口點是'main.scss'並且輸出文件夾是'/ public'？ – nourdine

在編輯中更新，如果仍然有任何疑問，可能會顯示您的配置文件，以便我可以在文件中進行更改以使事情變得更簡單。 –

我建議你在這裏查看我的答案，以澄清有關comons pulgins：http://stackoverflow.com/questions/35408898/why-is-my-webpack-bundle-js-and-vendor-bundle-js-so-incredibly - 大/ 35413001＃35413001 –

如何將所有的sass文件與webpack捆綁在一起？

回答

相關問題