如何将所有的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捆绑在一起？

回答

相关问题