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

【问题标题】：How to use @mixin inside sass file when loading files with webpack 2?使用 webpack 2 加载文件时如何在 sass 文件中使用 @mixin？
【发布时间】：2017-11-06 15:32:19
【问题描述】：

我无法让我编译的 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 什么也没做。它从未应用过，我可以看到并且它不会引发错误。

【问题讨论】：

标签： webpack sass

【解决方案1】：

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

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

【讨论】：