如何在使用webpack 2加載文件時在sass文件中使用@mixin？

我無法讓我編譯的CSS使用我的scss中的任何@mixins。編譯期間控制檯沒有錯誤，所以我甚至不知道從哪裏開始調查。如何在使用webpack 2加載文件時在sass文件中使用@mixin？

我的設置如下：

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文件中我有機會獲得$桌面寬度變量，但@ mixin什麼都不做。這是從來沒有應用，我可以看到，它不會引發任何錯誤。

來源

2017-06-05 Amir

問題不在於你的配置。您正在以錯誤的方式使用mixins： @mixin用於定義mixin。您必須在您的buttons.scss中使用@include desktop-up;。

看看這裏： http://sass-lang.com/guide#topic-6

來源

2017-06-05 19:39:19 Erik

如何在使用webpack 2加載文件時在sass文件中使用@mixin？

回答

相關問題