Webpack – 导出SASS(.scss)文件

2023年11月28日 221次阅读

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

最佳答案 我强烈建议使用
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设置的绝佳资源.

点赞