如何指定webpack中的目标文件夹进行sass预处理？

我有以下的WebPack配置：如何指定webpack中的目标文件夹进行sass预处理？

var webpack = require('webpack'); 


var config = { 
    devtool: 'eval-source-map', 
    entry: __dirname + "/my-app/assets/javascripts/app.jsx", 
    output: { 
    path: __dirname + "/my-app/assets/javascripts/compiled", 
    filename: "bundle.js" 
    }, 
    module: { 
    loaders: [{ 
     test: /\.jsx?$/, 
     exclude: /node_modules/, 
     loader: 'babel', 
     query: { 
     presets: ['es2015','react'] 
     } 
    }, 
    { 
     test: /\.scss$/, 
     exclude: /node_modules/, 
     loaders: ["style", "css?sourceMap", "sass?sourceMap"] 
    }] 
    } 
}

我想的WebPack在我的应用程序内/资产/ SCSS文件夹预处理SCSS文件和子文件夹，并生成CSS文件必须到这个文件夹我的应用程序内/资产/此文件夹的样式表或子文件夹与源文件夹的子文件夹模式相匹配。

我使用的WebPack-dev的服务器来观看和在源文件中的更改自动重新加载浏览器。这适用于jsx文件。

第二个相关的问题我怎么指定（基于Java），也看在后端的变化，如JSP GSP或Java类时，Java文件被更改，并自动重载浏览器正在生成？

来源

2016-04-29 ace

首先，我会尝试分开的开发和生产的WebPack配置。为了提取你的CSS，你将不得不使用Extract Text Plugin for webpack。只要做

npm i extract-text-webpack-plugin -D

在您的终端。通常我会提取用于生产的CSS。

你必须让你的WebPack像这样的例子：

var ExtractTextPlugin = require("extract-text-webpack-plugin"); 
module.exports = { 
    module: { 
     loaders: [ 
      { test: /\.scss$/, loader: ExtractTextPlugin.extract("style-loader", "css-loader", "sass-loader") } 
     ] 
    }, 
    plugins: [ 
     new ExtractTextPlugin("styles.css") 
    ] 
}

来源：https://github.com/webpack/extract-text-webpack-plugin

而且，我看你有CSS和青菜sourcemap。你应该只有一个sass。

来源

2016-04-29 11:53:29

如何ExtractTextPlugin知道把（从SCSS生成）css文件在我的应用程序内/资产/样式表文件夹？我没有看到你的答案。也没有提及SCSS。这是否适用于SCSS文件？ – ace

当然，我只是更新了我的答案，包括sass loader。它会知道提取到你的webpack输出指向的地方。在你的情况下，它__dirname +“/我 - 应用程序/资产/ Java脚本/编译” –

感谢澄清，但指定的输出路径是js文件，而不是CSS文件。如何为css生成的文件指定不同的输出路径？ – ace

如何指定webpack中的目标文件夹进行sass预处理？

回答

相关问题