webpack Verwendung von Variablen für SCSS Amateur

Question

Webpack hier vorangestellt ... Ich versuche, eine theme.scss Datei zu übernehmen das Thema durch Reagieren Toolbox anpassen, indem die Richtungen here spezifizierte folgende, nämlich:

Wenn Sie Wenn Sie Webpack als Modulbündler verwenden, verwenden Sie wahrscheinlich auch sass-loader. Was wir tun wollen, ist, jeder SASS-Dateikompilierung eine Reihe von Variablen voranzustellen, die außer Kraft gesetzt werden können, und dies kann mit der Datenoption erfolgen. Beispiel:

sassLoader: {Daten: '@import' '+ path.resolve (__ Verzeichnisname' theme/_theme.scss ') +' "; ' }

In diesem Fall haben wir den Themenimport für jede SASS-Kompilierung vor, so dass die Primärfarbe in jedem einzelnen Stylesheet geändert wird.

Ich habe Probleme der Umsetzung dieser Anweisung mit meiner aktuellen webpack Konfiguration, die wie folgt aussieht:

const webpack = require('webpack'); 
const path = require('path'); 
let ExtractTextPlugin = require('extract-text-webpack-plugin'); 

module.exports = { 
    context: path.join(__dirname, 'client'), 
    entry: [ 
     './main.js', 
    ], 
    output: { 
     path: path.join(__dirname, 'www'), 
     filename: 'bundle.js', 
    }, 
    module: { 
     rules: [ 
      { 
       test: /\.js$/, 
       exclude: /node_modules/, 
       use: [ 
        'babel-loader', 
       ], 
      }, 
      { 
       test: /\.css$/, 
       use: [ 
        "style-loader", 
        { 
         loader: "css-loader", 
         options: { 
          modules: true, 
          sourceMap: true, 
          importLoaders: 1, 
          localIdentName: "[name]--[local]--[hash:base64:8]" 
         } 
        }, 
        "postcss-loader" // has separate config, see postcss.config.js nearby 
       ] 
      }, 
      { 
       test: /\.scss$/, 
       use: ExtractTextPlugin.extract({ 
        fallback: 'style-loader', 
        use: [ 
         { 
          loader: 'css-loader', options: { 
           sourceMap: true, 
           data: '@import "' + path.resolve(__dirname, 'theme.scss') + '";' 
          } 
         }, 
         'postcss-loader', 
         { 
          loader: 'sass-loader', options: { 
           sourceMap: true, 
           data: '@import "' + path.resolve(__dirname, 'theme.scss') + '";' 
          } 
         }, 
        ], 
       }) 
      } 
     ] 
    }, 
    plugins: [ 
     new ExtractTextPlugin({ 
      filename: 'style.css', 
      allChunks: true 
     }), 
     new webpack.DefinePlugin({ 
      'process.env.NODE_ENV': JSON.stringify(process.env.NODE_ENV) 
     }), 
    ], 
    resolve: { 
     modules: [ 
      path.join(__dirname, 'node_modules'), 
     ], 
    }, 
}; 

ich es nicht einen Fehler, scheint aber wie die data Option vollständig sein wird ignoriert, weil meine Datei nicht importiert wird.

Hier ist meine theme.scss Datei (die sich in client/theme.scss):

@import "~react-toolbox/lib/colors"; 

$color-primary: $palette-red-500; 
$color-primary-dark: $palette-red-700; 

body { 
    background-color: black; //testing 
} 

Ich fühle mich wie ich hier etwas Dummes tun muss, aber ich fahre mich verrückt. Ich habe versucht, mit dem Pfad der theme.scss Datei (Ändern der data Attribut zu data: '@import "' + path.resolve(__dirname, 'client/theme.scss') + '";'), aber das macht keinen Unterschied. Ich bin überrascht, dass ich keinen Fehler bekomme.

Irgendwelche Vorschläge?

Answer 1

Die unten Konfiguration für mich gearbeitet

{ 
    test: /\.scss$/, 
    include: /client/, 
    use: ExtractTextPlugin.extract({ 
     fallback: 'style-loader', 
     loader: [ 
     { 
      loader: 'css-loader', 
      query: { 
      modules: true, 
      sourceMap: false, 
      localIdentName: '[name]_[local]_[hash:base64:5]', 
      }, 
     }, 
     'postcss-loader', 
     { 
      loader: 'sass-loader', 
      query: { 
      sourceMap: false, 
      data: `@import "${path.resolve(__dirname, 'client/_theme.scss')}";` 
      } 
     } 
     ], 
    }), 
    }, 

und client/_theme.scss Datei

@import "react-toolbox/lib/colors.css"; 

$color-primary: var(--palette-blue-500); 
$color-primary-dark: var(--palette-blue-700); 

ich die colors.css Datei in der react-toolbox Bibliothek geprüft und verwendet die gleichen Variablennamen. d. h. --palette-blue-500, nicht $palette-blue-500.