javascript - 我可以在 webpack 中构建 sass/less/css 而不需要在我的 JS 中使用它们吗？

Question

我目前有一些使用 webpack 成功构建的 React 组件和 sass。我还有一个主要的 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 Assets 如下所示:

/******/ (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")
  ]