Question

我有一个名为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的任何建议？

Answer 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获得与您相同的结果。

希望这有帮助。

使用Webpack 3编译SASS

1 个答案: