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 配置，以方便其他包使用它。对于您当前的配置，我会做三件事：

1. 将 webpack-merge 添加到您的项目 (npm i --save-dev webpack-merge)。

2. 将您的 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.
   

3. 将您的 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 将我的开发配置与生产配置分开。 Survive JS 上的This article 是一个很好的资源，可以帮助您充分利用 Webpack 设置。

Answer 2

如果你想让你在 sass 文件中使用的变量对你发布的包的消费者可用，那么你需要查看 node-sass 的一些特殊配置。

目前（以及在您发布此内容时）node-sass 支持在 javascript 中编写您自己的自定义 sass 函数：https://github.com/sass/node-sass#functions--v300---experimental

这是未经测试的，但我们前段时间在我工作的一家公司做过这个......要做你想做的事，你需要这样的东西：

src/
  your-package.js
  your-styles.scss

tools/
  constants/
    colours.js

  webpack/
    ...
    base.sass.js
    base.js
    development.js
    production.js

  sass/
    functions/
      colours.js

# tools/webpack/base.sass.js

const Config = require('webpack-config').default

import {
  signature as ColourSignature,
  handler as ColourHandler
} from '@tools/sass/functions/colours

module.exports = new Config()
  .merge({
    module: {
      rules: [
        {
          test: /\.scss$/,
          use: [
            ...
            { loader: 'sass-loader',
              options: {
                sourceMap: true,
                functions: {
                  [ColourSignature]: ColourHandler
                }
              }
            },
          ]
        }
      ]
    }
  })

# src/your-package.js

import Colours from '@tools/constants/colours'
import "./your-styles.scss"

export default YourAwesomeComponent {
  static Colours = Colours
}

export const colours = Colours

# src/your-styles.scss

.your-awesome-component { 
  background-color: ColourGet(veganvomit, sobrightithurts);
}

# tools/sass/functions/colour.js

import Colours from '@tools/constants/colours'

export signature = 'ColourGet($name, $shade: default)'
export handler = function(name, shade) {
  const colour = Colours[name]

  if (!colour) return 

  if (typeof colour === 'string') return colour

  return colour[shade]
}

# tools/sass/constants/colours.js

export default {

  veganvomit: {
    sobrightithurts: "darkkhaki",
    light: "#D2691E",
    default: "#8B4513",
    somethingsomethingsomethingdarkside: "#000"
  }

}

所以现在当你发布你的包时，他们可以从你的默认导出 YourAwesomeClass.Colours 访问 sass 变量，或者他们可以直接从 'your-awesome-package' `import { Colors } 导入它