如何配置webpack以在我的项目中使用指南针

Question

我是webpack的新手，我不知道如何在项目中使用Compass（CSS Authoring Framework）。

有一个好方法吗？

由于

Answer 1

您可以使用compass-mixins

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

的

的更新

您可以使用@ {3}}将您的SASS资源导入每个必需的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')

请检查实施sass-resources-loader

Answer 2

@Ayman Jitan的基本补充回答https://stackoverflow.com/a/34967698/1114926。

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

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

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

否则，您将从sass-loader“模块构建失败”和“未找到混合”中收到错误。如下所示“

Module build failed:
undefined
                ^
      No mixin named background

如果您只添加@import "compass/functions";（没有@import "compass";），则可能会收到此错误（取决于您包含的内容，在我的情况下，它是@include background(linear-gradient(white, #cccccc, #aaaaaa));引发的）：

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

Answer 3

由于指南针是半红宝石和半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！：指南针为no longer supported