Webpack - SASS（.scss）ファイルをエクスポートする

Question

私はパッケージを持っており、SASS変数を他のパッケージにエクスポートして使用したい。現在私のすべての.scssファイルはコンパイルされ、/dist/main.cssファイルに置かれています。私のwebpack設定：

var webpack = require('webpack'); 
var ExtractTextPlugin = require("extract-text-webpack-plugin"); 

module.exports = { 
    entry: ['./src/index.js'], 
    module: { 
    loaders: [ 
     { 
     test: /\.jsx?$/, 
     exclude: /node_modules/, 
     loader: 'babel' 
     }, 
     { 
     test: /\.(scss|sass|css)$/, 
     loader: ExtractTextPlugin.extract("style", "css!sass") 
     }, 
     { 
     test: /\.(png|woff|woff2|eot|ttf|svg)$/, 
     loader: 'url-loader?limit=10000&name=fonts/[hash].[ext]' 
     }, 
     { 
     test: /\.scss$/, loader: 'style!css!sass!sass-resources' 
     } 
    ] 
    }, 
    resolve: { 
    extensions: ['', '.js', '.jsx'] 
    }, 
    output: { 
    path: __dirname + '/build', 
    publicPath: '/', 
    filename: 'index.js', 
    library: 'Supernova', 
    libraryTarget: 'umd' 
    }, 
    externals: { 
    'react': 'react', 
    'react-dom': 'react-dom' 
    }, 
    plugins: [ 
    new ExtractTextPlugin("[name].css") 
    ] 
}; 

私の目的は、bootstrap-sassのようなパッケージを作成することです。

Answer 1

webpack-mergeを使用して、他のパッケージが簡単に使用できるようにSass設定を切り離すことを強くお勧めします。あなたの現在の設定のために、私は3つのことをするだろう：

1. プロジェクト（npm i --save-dev webpack-merge）にwebpack-mergeを追加します。

2. webpack.sass-config.jsという名前の別のファイルにSass設定を入れます。あなたのwebpack.config.js次へ

   var ExtractTextPlugin = require('extract-text-webpack-plugin'); 
   
   exports.config = function(options) { 
       return { 
       module: { 
        loaders: [ 
        { 
         test: /\.(scss|sass|css)$/, 
         loader: ExtractTextPlugin.extract("style", "css!sass") 
        }, 
        { 
         test: /\.scss$/, loader: 'style!css!sass!sass-resources' 
        } 
        ] 
       }, 
       plugins: [ 
        new ExtractTextPlugin("[name].css") 
       ] 
       } 
   } 
   
   // Side note: returning a function instead of a plain object lets 
   // you pass optional parameters from your main config file. This 
   // is useful if you want to make something like your compiled css 
   // file name different for another Webpack project without having 
   // to edit your Sass configuration file. 
   

3. 更新：明らかに

var merge = require('webpack-merge'); 

// import your separated Sass configuration 
var sassConfig = require('webpack.sass-config'); 

// Define your common config for entry, output, JSX, fonts, etc. 
var common = { 
    entry: ['./src/index.js'], 
    module: { 
    loaders: [ 
     { 
     test: /\.jsx?$/, 
     exclude: /node_modules/, 
     loader: 'babel' 
     }, 
     { 
     test: /\.(png|woff|woff2|eot|ttf|svg)$/, 
     loader: 'url-loader?limit=10000&name=fonts/[hash].[ext]' 
     } 
    ] 
    }, 
    resolve: { 
    extensions: ['', '.js', '.jsx'] 
    }, 
    output: { 
    path: __dirname + '/build', 
    publicPath: '/', 
    filename: 'index.js', 
    library: 'Supernova', 
    libraryTarget: 'umd' 
    }, 
    externals: { 
    'react': 'react', 
    'react-dom': 'react-dom' 
    } 
}; 

// Merge your common config and Sass config 
var config = merge(
    common, 
    sassConfig.config() 
); 

// Export the merged configuration 
modules.exports = config; 

が、これははるかにちょうどあなたのサスの設定を超えて行くことができ、それは次のものが含まれています。私は webpack-mergeを使用して自分の開発環境設定を本番環境設定から分離します。 Survive JSの This articleは、Webpackのセットアップを最大限に活用するための素晴らしいリソースです。