webpack-dev-server，webpack4導入全局sass文件

場景

當我們在scss樣式文件中想使用其他已經聲明好的scss變量文件，通常會這么做：

//index.scss
@import "minix.scss";body {color: $theme-color;
}

隨著項目越來越大，每個樣式文件都需要用到全局定義好的變量，這時就變得非常的笨重，弊端就暴露出來了

那么我們如何在react項目中解決這個問題呢

安裝

安裝sass-resouces-loader
npm i sass-resources-loader -D

這個加載器將@import您的SASS資源放入每個requiredSASS模塊中。因此，您可以在所有SASS樣式中使用共享變量和mixin，而無需在每個文件中手動導入它們。使用CSS模塊！

使用

module: {rules: [...{test: /\.(css|scss)$/,use: [MiniCssExtractPlugin.loader,{loader: 'css-loader'},{loader: 'postcss-loader',options: {plugins: () => [require('autoprefixer')],sourceMap: true}},{loader: 'sass-loader',options: {sourceMap: true}},{loader: 'sass-resources-loader',options: {resources: ['./skin/mixin.scss', './skin/base.scss']}}],exclude: path.resolve(__dirname, 'node_modules')}]
},