我有一个包,我想导出我的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 回答
我强烈建议使用webpack-merge来分离你的Sass配置,以便其他软件包使用它 . 对于您当前的配置,我会做三件事:
将
webpack-merge
添加到项目中(npm i --save-dev webpack-merge
) .将您的Sass配置放入一个单独的文件,名称类似于
webpack.sass-config.js
. 它包括以下内容:webpack.config.js
更新为以下内容:显然,这可以远远超出你的Sass配置 . 我使用
webpack-merge
将我的开发配置与 生产环境 配置分开 . This article on Survive JS是如何充分利用Webpack设置的绝佳资源 .