Question

我无法让我编译的css使用我的scss中的任何@mixins。在编译期间控制台中没有错误，所以我甚至不确定从哪里开始调查。

我的设置如下：

main.scss：

@charset 'UTF-8';

@import 'base/mixins';
@import 'components/button';

button.scss

#button {
  color: yellow;
  @mixin desktop-up {
    padding-top: 10px;
  }
}

_mixins.scss

$desktop-width: 992px;

@mixin desktop-up {
  @media (min-width: #{$desktop-width + 1}) {
    @content;
  }
}

我的webpack 2配置看起来像（相关部分）：

module.exports = {
  context: path.join(__dirname, ''),
  devtool: debug ? 'cheap-module-eval-source-map' : 'source-map',
  entry: ['./js/app.ts', './sass/main.scss'],
  module: {
    rules: [
      // ...
      {
        test: /\.css$/,
        use: [
         'style-loader',
         {
           loader: "css-loader",
           options: {
             modules: true,
             importLoaders: 1
           }
         }
        ]
      },
      {
          test: /\.scss$/,
          exclude: /node_modules/,
          use: [
            'style-loader',
            {loader: 'css-loader',
              options: {
                importLoaders: 1
              }
            },
            {
              loader: 'postcss-loader',
              options: {
                plugins: function () {
                  return [
                    require('postcss-smart-import'),
                    require('precss'),
                    require('autoprefixer')
                  ];
                }
              }
            },
            {
              loader: 'sass-loader',
              options: {
                includePaths: [path.resolve(__dirname, "./sass")]
              }
            }
          ]
      }
      // ....
    ]
  },
// .......

奇怪的是，在我的button.scss文件中，我可以访问 $ desktop-width 变量，但@mixin什么也没做。它永远不会应用我能看到的，它不会引起任何错误。

Answer 1

问题不在于您的配置。您正在以错误的方式使用mixins： @mixin用于定义mixin。您必须在@include desktop-up;中使用buttons.scss。

看这里： http://sass-lang.com/guide#topic-6

使用webpack 2加载文件时如何在sass文件中使用@mixin？

1 个答案: