css - Webpack 忽略 sass 文件

Question

我正在为一个元素使用 webpack。它可以很好地编译 typescript ，但是，它似乎忽略了 sass 文件。 sass文件存储在元素目录的'./build/sass'中。

运行 webpack 时的输出是:

Hash: dc64dbebfd6ff9cb2a38
Version: webpack 1.13.2
Time: 1201ms
    Asset    Size  Chunks             Chunk Names
bundle.js  1.7 kB       0  [emitted]  app
   [0] multi app 28 bytes {0} [built]
    + 1 hidden modules

所以它运行良好。您可以在下面找到 webpack.config.js:

require('dotenv').load()

var webpack = require("webpack"),
    path = require('path'),
    ExtractTextPlugin = require("extract-text-webpack-plugin");

module.exports = {
    context: __dirname,
    entry: {
        app: [
            path.join(__dirname, 'build', 'js', 'app')
        ]
    },
    output: {
        filename: 'bundle.js',
        path: path.join(__dirname, 'public'),
        publicPath: '/',
    },

    resolve: {
        extensions: ['', '.ts', '.js'],
        modulesDirectories: ['node_modules'],
        root: path.join('.', 'build')
    },
    module: {
        loaders: [
            { test: /\.css$/,    loader: "style-loader!css-loader" },
            { test: /\.sass$/, loader: new ExtractTextPlugin.extract('css!sass') },
            { loader: 'ts', test: /\.ts$/, exclude: /(node_modules|bower_components)/ },
        ]
    },
    plugins: [
        new ExtractTextPlugin('public/main.css', {allChunks: true})
    ]
};

我已经尝试过使用和不使用 ExtractTextPlugin。但它看起来就像 webpack 一起忽略了 sass 和 css 文件。我已经查看了可能有几十个示例，但无论我如何配置 webpack，它都不会获取 sass 或 css 文件。

这是 package.json:

{
  "name": "xxxxx",
  "version": "0.0.0",
  "private": true,
  "dependencies": {
    "async": "^1.5.0",
    "cloudinary": "^1.2.4",
    "css-loader": "^0.25.0",
    "dotenv": "^2.0.0",
    "express-handlebars": "^3.0.0",
    "extract-text-webpack-plugin": "^1.0.1",
    "handlebars": "^4.0.5",
    "keystone": "^0.3.19",
    "lodash": "^4.13.1",
    "moment": "^2.10.6",
    "node-sass": "^3.3.2",
    "node-sass-middleware": "^0.9.7",
    "sass-loader": "^4.0.2",
    "style-loader": "^0.13.1",
    "ts-loader": "^0.8.2",
    "typescript": "^1.8.10",
    "webpack": "^1.13.2",
    "webpack-dev-middleware": "^1.8.1",
    "webpack-hot-middleware": "^2.12.2"
  },
  "devDependencies": {
    "eslint": "^2.12.0",
    "eslint-config-keystone": "^2.3.1",
    "eslint-plugin-react": "^5.1.1",
    "typescript": "^1.8.10",
    "typings": "^1.3.3"
  },
  "scripts": {
    "lint": "eslint .",
    "start": "node keystone.js"
  }
}

如果有人能阐明这里发生的事情，我们将不胜感激。

Answer 1

我认为我说得对，webpack 根据它在代码中找到的依赖项构建它的包。

你在任何地方都需要 () 你的 sass 文件吗？

(我会添加这个作为评论，但我还没有那个选项)