Webpack игнорирует файлы sass

Я использую 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 вместе. Я просмотрел, наверное, десятки примеров, но независимо от того, как я настраиваю веб-пакет, он не подхватывает файлы 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"
  }
}

Был бы признателен, если бы кто-то мог пролить свет на то, что здесь происходит.


webpack css sass webpack-style-loader
person erikf    schedule 23.09.2016    source источник

Ответы (2)


arrow_upward
4
arrow_downward

Думаю, я прав, говоря, что webpack создает свой пакет на основе зависимостей, которые он находит в коде.

Вам нужны () ваши файлы sass где-нибудь?

(Я бы добавил это как комментарий, но у меня пока нет такой возможности)

person Banners    schedule 23.09.2016

arrow_upward
-1
arrow_downward

На самом деле 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

Затем просто добавьте это в свою задачу сборки.

person Brandon Parker    schedule 25.09.2016
comment
на самом деле webpack отлично может связать css/ssas вместе с javascript, используя соответствующие загрузчики. - person Banners; 26.09.2016
comment
Это потребует gulp в качестве зависимости. - person Moritz Schmitz v. Hülst; 02.11.2016
comment
Ленивый ответ заставляет меня проголосовать за этот ответ. webpack способен работать с sass. Бывший. sass-загрузчик. - person flpms; 30.05.2017