[英]Produce sourcemap from compiled SASS in webpack4
我的项目不是 JS 网络应用程序。 它是一个带有 PHP 模板的传统 CMS,可以调用所需的 JS 和 CSS 文件。 我正在使用 webpack4 来实现这个目标:
我正在粘贴我的配置文件,看看是否有人发现出了什么问题。
我已经尝试将options:{ sourceMap:true,}
添加到这个加载器: sass-loader, postcss-loader, css-loader
但是我得到了一长串似乎来自extrac-loader
的错误。
我感谢有关此问题的任何提示或帮助。 我已经花了 2 天的时间对其进行故障排除,但没有任何进展!
const path = require('path');
const OptimizeCSSAssetsPlugin = require(
"optimize-css-assets-webpack-plugin"
); // Recommended for Minifying outputted css
const cssnano = require("cssnano"); // Used by OptimizeCSSAssetsPlugin
var webpack = require('webpack'); // used by SourceMapDevToolPlugin --which was recommended over devtool.
module.exports = {
cache: false,
entry: {
'main': [ // forces webpack to process specified files
'../src/js/main.js',
'../src/sass/screen.scss',
],
},
output: {
filename: '[name].bundle.js',
path: path.resolve(__dirname, '../dist/js'), // watchout: all output paths in 'rules' will be relative to this path
},
mode: 'development',
devtool: false, // passes sourcemap control to SourceMapDevToolPlugin
module:{
rules: [
{
test: /\.scss$/,
use: [
{
loader: 'file-loader',
options: {
name: '../css/[name].css', // Destination of final processed css file
}
},
{
loader: 'extract-loader', //The extract-loader evaluates the given source code on the fly and returns the result as string.
},
{
loader: 'css-loader?-url', //The css-loader interprets @import and url() like import/require() and will resolve them.
},
{
loader: 'postcss-loader', // adds prefixes
},
{
loader: 'sass-loader', // Loads a Sass/SCSS file and compiles it to CSS
},
]
},
{
test: /\.js$/,
exclude: /node_modules/,
use: {
loader: 'babel-loader',
options: {
presets:
[
'@babel/env',
{
// "corejs": 3,
}
]
}
}
},
] // End of rules
}, // End of module
plugins: [
new webpack.SourceMapDevToolPlugin(
{
filename: '[name].map',
columns: false,
module: true,
}
),
new OptimizeCSSAssetsPlugin({
cssProcessor: cssnano,
cssProcessorOptions: {
discardComments: {
removeAll: true,
},
// Run cssnano in safe mode to avoid
// potentially unsafe transformations.
safe: true,
},
canPrint: false,
}),
],
} // End of module.exports
好吧,我的方法是错误的。 修改了一些东西,现在我有了 js 和 css 文件的源映射。
我正在粘贴我的 webpack.config 文件以防有人发现它有用(也许这对大多数人来说是显而易见的,但我是 webpack 的新手,希望这对像我这样的新手有所帮助)。
我所做的更改:我发现不需要 extract-loader 和 file-loader。 我改用了 mini-css-extract-plugin ......它允许使用源映射。
与 optimize-css-assets-webpack-plugin 存在冲突(如果您将其用于缩小),因此请检查插件部分配置以确保生成站点地图。
const path = require("path");
const MiniCssExtractPlugin = require("mini-css-extract-plugin"); // extracts and saves css files
const OptimizeCSSAssetsPlugin = require("optimize-css-assets-webpack-plugin"); // Minifies css
const cssnano = require("cssnano"); // Used by OptimizeCSSAssetsPlugin in the css minification
var webpack = require('webpack'); // used by SourceMapDevToolPlugin
module.exports = {
cache: false,
entry: {
'main': [ // forces webpack to process specified files
'../src/js/main.js',
'../src/sass/main.scss',
],
},
output: {
filename: '[name].bundle.js',
path: path.resolve(__dirname, '../dist/js'), // watchout: all output paths in 'rules' will be relative to this path
},
mode: 'development',
devtool: false, // passes sourcemap control to SourceMapDevToolPlugin
module:{
rules: [
{
test: /\.js$/,
exclude: /node_modules/,
use: {
loader: 'babel-loader',
options: {
presets:
[
'@babel/env',
{
// "corejs": 3,
}
]
}
}
},
{
test: /\.scss$/,
use: [
{
loader: MiniCssExtractPlugin.loader,
options: {
publicPath: '/public/path/to/',
},
},
{
loader: 'css-loader', //The css-loader interprets @import and url() like import/require() and will resolve them.
options: {
url: false,
sourceMap: true,
},
},
{
loader: 'postcss-loader', // adds prefixes
options: {
sourceMap: true,
},
},
{
loader: 'sass-loader', // Loads a Sass/SCSS file and compiles it to CSS
options: {
sourceMap: true,
// importer: globImporter(),
},
},
]
},
] // End of rules
}, // End of module
plugins: [
new MiniCssExtractPlugin({
filename: '../css/[name].css'
}),
new OptimizeCSSAssetsPlugin({
cssProcessor: cssnano,
cssProcessorOptions: {
map: {
inline: false, // set to false if you want CSS source maps
annotation: true
},
discardComments: {
removeAll: true,
},
// Run cssnano in safe mode to avoid
// potentially unsafe transformations.
safe: true,
},
canPrint: false,
}),
new webpack.SourceMapDevToolPlugin(
{
filename: '[name].map',
columns: false,
module: true,
}
),
],
} // End of module.exports
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.