使用的WebPack前面加上了SCSS

Question

的WebPack業餘這裏變量...我試圖將一個theme.scss文件來定製所用的主題，通過以下方向作出反應的工具箱內指定here，即：

如果您正在使用Webpack作爲模塊打包器，您可能也使用sass-loader。我們想要做的是，預先準備每個SASS文件彙編一組變量來覆蓋，這可以與數據選項來完成。例如：

sassLoader：{data：'@import''+ path.resolve（__ dirname，'theme/_theme.scss'）+'「;' }

在這種情況下，我們都在前面加上主題導入到各SASS編譯，所以原色將在每一個樣式表來改變。

我在實施這一指令與我目前的WebPack配置，它看起來像這樣的麻煩：

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'), 
     ], 
    }, 
}; 

我沒有得到一個錯誤，但它似乎像data選項是完全忽略，因爲我的文件沒有被導入。

這裏是我的theme.scss文件（位於client/theme.scss）：

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

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

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

我覺得我一定要在這裏做一些愚蠢的事，但我駕駛自己瘋了。我曾嘗試與theme.scss文件（改變data屬性data: '@import "' + path.resolve(__dirname, 'client/theme.scss') + '";'）的路徑搞亂但這並不有所作爲。我很驚訝，我沒有收到某種錯誤。

有什麼建議嗎？

Answer 1

下面的配置爲我工作

{ 
    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')}";` 
      } 
     } 
     ], 
    }), 
    }, 

和client/_theme.scss文件

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

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

我檢查了colors.css文件中react-toolbox庫，並使用相同的變量名。即--palette-blue-500，不$palette-blue-500。