Webpack - SASS (.scss) 파일 내보내기

Question

패키지가 있고 SASS 변수를 다른 패키지로 내보내고 싶습니다. 현재 내 모든 .scss 파일은 컴파일되어 /dist/main.css 파일에 저장됩니다. 내 웹팩 설정 :

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 구성을 분리하는 것이 좋습니다. 현재 설정을 위해, 나는 세 가지를 할 것 :

1. 프로젝트 (npm i --save-dev webpack-merge)에 webpack-merge를 추가합니다.

2. 새시 구성을 webpack.sass-config.js과 같은 이름의 별도 파일에 넣으십시오. 당신의 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 설정을 최대한 활용하는 훌륭한 방법입니다.