使用 Webpack 3 编译 SASS答案

【问题标题】：Compiling SASS with Webpack 3使用 Webpack 3 编译 SASS
【发布时间】：2017-11-25 09:21:47
【问题描述】：

我有一个名为 app.scss 的简单文件，我想将其编译为名为 app.css 的 css。

/web/static/stylesheets/app.scss

Compiles to...

/priv/static/css/app.css

这是我的 webpack.config。

const path = require("path");

module.exports = [
  {
    entry: "./web/static/js/app.js",
    output: {
      path: path.resolve(__dirname, "priv/static/js"),
      filename: "app.js"
    },
    resolve: {
      modules: ["node_modules", __dirname + "/web/static/js"]
    },
    module: {
      loaders: [
        {
          test: /\.js$/,
          exclude: /node_modules/,
          loader: "babel-loader",
          query: {
            presets: ["env"]
          }
        }
      ]
    }
  },
  {
    entry: "./web/static/stylesheets/app.scss",
    output: {
      path: path.resolve(__dirname, "priv/static/css"),
      filename: "app.css"
    },
    resolve: {
      modules: ["node_modules"]
    },
    module: {
      loaders: [
        {
          test: /\.scss$/,
          exclude: /node_modules/,
          use: [
            {
              loader: "style-loader"
            },
            {
              loader: "css-loader"
            },
            {
              loader: "sass-loader"
            }
          ]
        }
      ]
    }
  }
];

文件编译没有错误，但是app.css里面的内容不正确。

/******/ (function(modules) { // webpackBootstrap
/******/    // The module cache
/******/    var installedModules = {};
/******/
/******/    // The require function
/******/    function __webpack_require__(moduleId) {
/******/
/******/        // Check if module is in cache
/******/        if(installedModules[moduleId]) {
/******/            return installedModules[moduleId].exports;
/******/        }
/******/        // Create a new module (and put it into the cache)
/******/        var module = installedModules[moduleId] = {
/******/            i: moduleId,
/******/            l: false,
/******/            exports: {}
/******/        };
... and so on.

关于我在哪里错误配置 webpack 有什么建议吗？

【问题讨论】：

标签： webpack sass

【解决方案1】：

有同样的问题，当您使用 ExtractTextPlugin 并使路径中的文件名与 ExtractTextPlugin 中的输出名称完全相同时，它似乎可以工作。

output: {
  path: resolve("assets"),
  filename: './css/[name].css',
}
plugins: [
  new ExtractTextPlugin('./css/[name].css', {
    allChunks: true,
  }),
]

我首先在ExtractTextPlugin部分命名文件名css/[name].css，然后在.css文件中用一段JS得到和你一样的结果。

希望这会有所帮助。

【讨论】：