Webpack ignoriert Sass-Dateien

Question

Ich verwende Webpack für ein Projekt. Es kompiliert das Typoskript gut, jedoch scheint es die Sass-Dateien zu ignorieren. Die Sass-Dateien sind in der './build/sass' des Projektverzeichnisses gespeichert.

Wenn webpack dem Ausgang läuft:

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 

So fein läuft. Sie können die webpack.config.js unten finden:

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}) 
    ] 
}; 

ich beide mit dem ExtractTextPlugin versucht haben, und ohne. Aber es sieht so aus, als würde webpack sowohl sass als auch css Dateien ignorieren. Ich habe mir wahrscheinlich ein paar Dutzend Beispiele angesehen, aber egal, wie ich das Webpack konfiguriere, es nimmt keine Sass- oder CSS-Dateien auf.

Hier ist der 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" 
    } 
} 

würde schätzen, wenn jemand etwas Licht vergießen konnte, was hier vor sich geht.

Answer 1

Ich denke, ich habe recht, wenn ich sage, dass webpack sein Bündel basierend auf Abhängigkeiten aufbaut, die es im Code findet.

Benötigen Sie() Ihre Sass-Dateien überall?

(ich würde dies als Kommentar hinzufügen, aber ich habe nicht über diese Option noch)

Answer 2

Wirklich Webpack verwendet wird, um die JavaScript und nicht die CSS/SASS zu bündeln. Sie müssen eine Aufgabe hinzufügen, um Ihre SASS-Dateien zu bearbeiten. Hier ist etwas, um loszulegen:

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 

Dann fügen Sie das nur zu Ihrer Produktion Build-Aufgabe.