如何配置 webpack 在我的项目中使用 compass

Question

我是 webpack 的新手，我不知道如何在项目中使用 Compass（CSS 创作框架）。

有什么好的方法吗？

谢谢

Answer 1

var path = require('path');
module.exports = {
  ...
  module: {
    loaders: [
      {
        test: /\.scss$/,
        loader: "style!css!sass?includePaths[]=" + path.resolve(__dirname, "./node_modules/compass-mixins/lib")
      }
    ]
  }
};

这是一个helpful webpack boilerplate

更新：

您可以使用 sass-resources-loader 将您的 SASS 资源 @import 到每个必需的 SASS 模块中。您永远不必在所有 sass 文件中导入资源。

module.exports = {
  ...,
  module: {
    loaders: [
      ...,
      {
        test: /\.scss$/,
        loaders: [
          'style',
          'css',
          'sass?outputStyle=expanded&includePaths[]=' + path.resolve(__dirname, './node_modules/compass-mixins/lib'),
          'sass-resources'
        ]
      }
    ]
  },
  sassResources: path.resolve(__dirname, './client/app/resources/stylesheets/base.scss')

请检查执行情况in action in this boilerplate

Answer 2

@Ayman Jitan 回答的重要补充。

您必须在 styles.scss 文件的顶部添加这两行：

@import "compass";  // <--
@import "compass/functions";  // <--

.foo {
    min-height: 100px;
    background-color: #fff;
}

否则，您会发现 sass-loader "Module build failed" 和 "No mixin" 错误。喜欢下面的

Module build failed:
undefined
                ^
      No mixin named background

如果你只添加 @import "compass/functions";（没有 @import "compass";），你可能会得到这个错误（取决于你包含的 mixin，在我的例子中它是由 @include background(linear-gradient(white, #cccccc, #aaaaaa)); 抛出的）：

Module build failed:
undefined
                          ^
      Media query expression must begin with '('

Answer 3

由于 compass 是一半 ruby 一半 sass 的框架，compass-mixins 可能无法正确使用遗留的 scss 代码。

要在您的 webpack 配置中启用原始指南针，您应该使用：

ruby-sass-loader

使用 compass 选项。

module.exports = {
  // ...    
  module: {
    loaders: [
      /* some other loaders */
      {
        test: /\.scss$/,
        loader: 'style!css!ruby-sass?compass=1'
      }
    ]
  }
};

NB!: Compass is no longer supported

如何配置 webpack 在我的项目中使用 compass

How to configure webpack to use compass in my project

css

webpack

compass

更新：