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

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

Webpack忽略了sass文件

2 个答案: