首页 文章

Webpack - 导出SASS(.scss)文件

提问于
浏览
4

我有一个包,我想导出我的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的包 .

1 回答

  • 1

    我强烈建议使用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;
    

    显然,这可以远远超出你的Sass配置 . 我使用 webpack-merge 将我的开发配置与 生产环境 配置分开 . This article on Survive JS是如何充分利用Webpack设置的绝佳资源 .

相关问题