Webpack - 導出SASS（.scss）文件

我有一個包，我想將我的SASS變量導出到其他包使用它。目前我的所有.scss文件都是編譯並放在/dist/main.css文件中。我的webpack配置：Webpack - 導出SASS（.scss）文件

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的包。

來源

2016-08-05 Bruno Quaresma

我強烈建議使用webpack-merge分離出您的Sass配置，以便其他軟件包可以輕鬆使用它。對於當前的配置，我會做三兩件事：

添加webpack-merge到您的項目（npm i --save-dev webpack-merge）。

將您的Sass配置放入一個單獨的文件中，命名爲webpack.sass-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.

更新您的webpack.config.js以下幾點：

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安裝程序的絕佳資源。

來源

2017-03-13 15:57:29

Webpack - 導出SASS（.scss）文件

回答

相關問題