到目前为止,我正在使用gulp
scss
个文件gulp-sass
渠道我使用link
标记在我的html中使用了最终编译的css文件。
我在webpack中复制这个是不成功的。我引用了这个loader,但我找不到在特定位置生成最终css文件的任何选项。这是我当前的webpack配置:
var path = require('path');
var webpack = require('webpack');
module.exports = {
entry: './src/liteword.js',
output: {
path: path.resolve(__dirname, 'build'),
filename: 'liteword.bundle.js'
},
module: {
loaders: [
{
test: /\.js$/,
loader: 'babel-loader',
query: {
presets: ['es2015']
}
},
{
test: /\.scss$/,
loaders: ['style', 'css?sourceMap', 'sass?sourceMap']
}
]
},
stats: {
colors: true
},
devtool: 'source-map',
watch: true
};
答案 0 :(得分:0)
使用extract-text-webpack-plugin可以解决您的问题。它的作用是将生成的内容(在本例中为css)移动到一个单独的文件中(而不是在bundle.js文件中将它们捆绑在一起)。
通过npm安装:
npm install --save-dev extract-text-webpack-plugin
更新您的webpack配置以包含此内容:
var ExtractTextPlugin = require('extract-text-webpack-plugin');
然后用自定义的加载器替换你的sass加载器,并包含插件:
module.exports = {
// ...
module: {
loaders: [
// ...
{
test: /\.scss$/,
loader: ExtractTextPlugin.extract('css!sass')
}
]
},
plugins: [
new ExtractTextPlugin('public/style.css', {
allChunks: true
})
]
}