我一直在使用webpack和yarn一段时间,使用来自underscores.me的主题构建这个wordpress项目,直到最近我的webpack似乎不再编译我的sass了。如果我对我的sass文件进行了更改,则它们不会显示在网站中。当我运行webpack --watch时,它自己的webpack似乎运行良好而没有错误但是即使我在我的scss中删除了错误的代码,webpack甚至都没有检测到它。它似乎与正在发生的事情无关。
这是我的配置:
//webpack.config.js
var webpack = require('webpack');
var GoogleFontsPlugin = require("google-fonts-webpack-plugin");
// exports the node module
module.exports = function(env) {
'use strict';
return {
entry: "./js/app.js",
output: {
path: __dirname + "/dist",
filename: "bundle.js"
},
/* ... */
plugins: [
new GoogleFontsPlugin({
fonts: [
{ family: "Source Sans Pro" },
{ family: "Raleway", variants: [ "400", "600","900", "700italic", "Regular", "Medium","Bold","Extra-Bold", "Black"] }
]
/* ...options */
})
],
module: {
loaders: [
{
test: /\.html$/,
loader: 'raw-loader',
exclude: /node_modules/
},
{
test : /\.css$/,
loaders: ['style-loader', 'css-loader', 'resolve-url-loader', "postcss-loader"]
}, {
test : /\.scss$/,
loaders: ['style-loader', 'css-loader', 'resolve-url-loader', 'sass-loader?sourceMap']
},
{
test: /\.woff($|\?)|\.woff2($|\?)|\.ttf($|\?)|\.eot($|\?)|\.svg($|\?)/,
loader: 'url-loader'
},
// the url-loader uses DataUrls.
// the file-loader emits files.
{
test: /\.woff2?(\?v=[0-9]\.[0-9]\.[0-9])?$/,
// Limiting the size of the woff fonts breaks font-awesome ONLY for the extract text plugin
// loader: "url?limit=10000"
use: "url-loader"
},
{
test: /\.(ttf|eot|svg)(\?[\s\S]+)?$/,
use: 'file-loader'
},
{
// I want to uglify with mangling only app files, not thirdparty libs
test: /.*\/app\/.*\.js$/,
exclude: /.spec.js/, // excluding .spec files
loader: "uglify"
},
{
test: /\.(gif|png|jpe?g|svg)$/i,
loaders: [
'file-loader', {
loader: 'image-webpack-loader',
options: {
gifsicle: {
interlaced: false
},
optipng: {
optimizationLevel: 7
},
pngquant: {
quality: '65-90',
speed: 4
},
mozjpeg: {
progressive: true,
quality: 65
},
// Specifying webp here will create a WEBP version of your JPG/PNG images
webp: {
quality: 75
}
}
}
]
}
]
}
}
}