我可以在webpack中构建sass/less/css而不需要在我的JS中吗？

Question

我目前有一些反应组件和sass正在使用webpack成功构建.我还有一个主要的sass文件,使用gulp任务构建到css.

我只想使用其中一种技术,是否可以将sass编译为css,而无需在条目文件中对sass进行相关的需求？

这是尝试使用WebpackExtractTextPlugin的示例

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]")
  ]

运行webpack后,style.css资产如下所示:

/******/ (function(modules) { // webpackBootstrap
/******/    // The module cache
/******/    var installedModules = {};
/******/
/******/    // The require function
/******/    function __webpack_require__(moduleId) {

...

Answer 1

我在@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")
  ]