Webpack 忽略 sass 文件

Question

我正在为一个项目使用 webpack。它可以很好地编译打字稿，但是，它似乎忽略了 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 文件吗？

（我会将此添加为评论，但我还没有该选项）

Answer 2

Webpack 是用来捆绑 JavaScript 而不是 CSS/SASS。您需要添加一个任务来处理您的 SASS 文件。下面是一些帮助您入门的内容：

var config = require('../config');
if(!config.tasks.css) return;

var gulp = require('gulp'),
    gulpif = require('gulp-if'),
    sass = require('gulp-sass'),
    sourcemaps = require('gulp-sourcemaps'),
    autoprefixer = require('gulp-autoprefixer'),
    path = require('path'),
    cssnano = require('gulp-cssnano');

var paths = {
    src: path.join(config.root.src, config.tasks.css.src, '/**/*.{' + config.tasks.css.extensions + '}'),
    dest: path.join(config.root.dest, config.tasks.css.dest)
}

var cssTask = function () {
  return gulp.src(paths.src)
    .pipe(gulpif(!global.production, sourcemaps.init()))
    .pipe(sass(config.tasks.css.sass))
    .pipe(autoprefixer(config.tasks.css.autoprefixer))
    .pipe(gulpif(global.production, cssnano({autoprefixer: false})))
    .pipe(gulpif(!global.production, sourcemaps.write()))
    .pipe(gulp.dest(paths.dest));
}

gulp.task('css', cssTask)
module.exports = cssTask

然后将其添加到您的生产构建任务中。