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

Posted 2023-02-16

【中文标题】如何在我的项目中配置 webpack 以使用 compass

【英文标题】：How to configure webpack to use compass in my project

【发布时间】：2015-12-31 18:00:15

【问题描述】：

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

有什么好的方法吗？

谢谢

【参考方案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

更新：

您可以使用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

【讨论】：

不。该插件没有background mixin。 Module build failed: No mixin named background

@Green 添加@import "compass";在我使用 compass mixins 的每个文件的开头解决了这个问题，但我不确定这是否是最好的方法

*@import ..该死的堆栈溢出夸张的规则，他们不会让我使用@后跟两次

@Green 所有背景混合都存在于 compass-mixins 中。

@coiso 在每个 scss 文件的标题中导入资源（例如指南针）没有任何意义，而且看起来非常多余。我用这个问题的解决方案更新了我的答案

【参考方案2】：

@Ayman Jitan answer https://***.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";），你可能会得到这个错误（取决于你包含的mixin，在我的例子中它是由@include background(linear-gradient(white, #cccccc, #aaaaaa));抛出的）：

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

【参考方案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'
      
    ]
  
;

注意！：指南针是no longer supported