css - 网络包 4 : How to get CSS source maps working with LESS?

Question

多年来我一直在尝试让 CSS 源映射在 webpack 中工作，但没有成功。我不确定链条中哪里出了问题。我希望有人能指出我正确的方向。

这是发生的事情:

行号错误，实际上文件名也错误。 main.less 仅包含一堆 @import，实际的 CSS 位于不同的文件中。

下面是我的webpack.config.js。我用 util.inspect 打印了它，因为它是由许多不同的 block 组合而成的，我认为这样更容易阅读:

{ target: 'web',
  context: '/home/me/Projects/myproject',
  mode: 'production',
  entry: 
   { main: 
      [ '/home/me/Projects/myproject/assets/scripts/lib/autofocus-polyfill',
        '/home/me/Projects/myproject/assets/scripts/lib/matches-polyfill',
        'whatwg-fetch',
        'core-js/es6',
        'core-js/stage/4',
        '/home/me/Projects/myproject/assets/main' ],
     print: 
      [ '/home/me/Projects/myproject/assets/stylesheets/print' ] },
  output: 
   { path: '/home/me/Projects/myproject/www/assets',
     pathinfo: false,
     publicPath: '/assets/',
     crossOriginLoading: 'anonymous',
     filename: '[name].[chunkhash].js',
     chunkFilename: 'chunk.[chunkhash].js' },
  resolve: 
   { modules: 
      [ '/home/me/Projects/myproject/assets',
        '/home/me/Projects/myproject/node_modules/',
        '/home/me/Projects/myproject/vendor/' ],
     alias: 
      { 'jquery-ui/ui/widget': '/home/me/Projects/myproject/node_modules/jquery-ui/widget.js' },
     extensions: [ '.jsx', '.js', '.less', '.css' ] },
  node: { __filename: true, __dirname: true, fs: 'empty' },
  amd: { jQuery: true },
  module: 
   { rules: 
      [ { enforce: 'pre',
          test: /\.jsx?$/,
          loader: 'eslint-loader',
          include: '/home/me/Projects/myproject/assets',
          options: { cache: false, quiet: true, failOnError: true } },
        { test: /\.jsx?$/,
          loader: 'strip-loader',
          options: 
           { strip: 
              [ 'console.assert',
                'console.count',
                'console.dir',
                'console.dirxml',
                'console.group',
                'console.groupCollapsed',
                'console.groupEnd',
                'console.info',
                'console.log',
                'console.profile',
                'console.profileEnd',
                'console.table',
                'console.time',
                'console.timeEnd',
                'console.timeStamp' ] } },
        { test: /\.less$/,
          use: 
           [ '/home/me/Projects/myproject/node_modules/mini-css-extract-plugin/dist/loader.js',
             { loader: 'css-loader',
               options: 
                { sourceMap: true,
                  root: '/home/me/Projects/myproject/www',
                  localIdentName: '[name]_[local]--[hash:base62:5]',
                  importLoaders: 1 } },
             { loader: 'postcss-loader',
               options: 
                { ident: 'postcss',
                  sourceMap: true,
                  plugins: [Function: plugins] } },
             { loader: 'less-loader',
               options: { sourceMap: true, strictMath: true, strictUnits: true } } ] },
        { test: /\.css$/,
          use: 
           [ '/home/me/Projects/myproject/node_modules/mini-css-extract-plugin/dist/loader.js',
             { loader: 'css-loader',
               options: 
                { sourceMap: true,
                  root: '/home/me/Projects/myproject/www',
                  localIdentName: '[name]_[local]--[hash:base62:5]',
                  importLoaders: 1 } },
             { loader: 'postcss-loader',
               options: 
                { ident: 'postcss',
                  sourceMap: true,
                  plugins: [Function: plugins] } } ] },
        { test: /\.jsx?$/,
          include: 
           [ '/home/me/Projects/myproject/assets',
             '/home/me/Projects/myproject/node_modules/react-ajax-loader' ],
          loader: 'babel-loader',
          options: 
           { cacheDirectory: '/home/me/Projects/myproject/cache/babel',
             forceEnv: 'production' } },
        { test: /\.(jpe?g|png|gif|svg)($|\?)/i,
          loader: 'url-loader',
          options: { limit: 2048, name: '[name].[md5:hash:base32:10].[ext]' } },
        { test: /\.(eot|ttf|woff2?|htc)($|\?)/i,
          loader: 'file-loader',
          options: { name: '[name].[md5:hash:base32:10].[ext]' } } ] },
  plugins: 
   [ NoEmitOnErrorsPlugin {},
     HashedModuleIdsPlugin {
       options: 
        { context: null,
          hashFunction: 'md4',
          hashDigest: 'base64',
          hashDigestLength: 4 } },
     LoaderOptionsPlugin { options: { options: {}, test: { test: [Function: test] } } },
     MiniCssExtractPlugin {
       options: 
        { filename: '[name].[hash].css',
          chunkFilename: 'chunk.[chunkhash].css' } },
     ProvidePlugin {
       definitions: 
        { '$': 'jquery',
          jQuery: 'jquery',
          timezoneJS: 'timezone-js',
          React: 'react',
          _: 'lodash' } },
     DefinePlugin {
       definitions: { 'process.env': { NODE_ENV: '"production"' } } },
     { apply: [Function: apply] } ],
  bail: true,
  devtool: 'source-map',
  optimization: 
   { minimize: true,
     minimizer: 
      [ UglifyJsPlugin {
          options: 
           { test: /\.(js?)(\?.+)?$/i,
             warningsFilter: [Function],
             extractComments: /^!|\b(copyright|license)\b|@(preserve|license|cc_on)\b/i,
             sourceMap: true,
             cache: true,
             parallel: true,
             include: undefined,
             exclude: /\.min\.js$/,
             uglifyOptions: 
              { output: { beautify: false },
                compress: { warnings: false, drop_console: true },
                mangle: true,
                sourceMap: true } } } ],
     splitChunks: { chunks: 'all' },
     runtimeChunk: true } }

在中间的某个地方，您可以看到 .less 的加载器。展开后，看起来像这样:

[
    {
        loader: 'css-loader',
        options: {
            sourceMap: true,
            root: publicDir,
            localIdentName: '[name]_[local]--[hash:base62:5]',
            importLoaders: 1,
        }
    },
    {
        loader: 'postcss-loader',
        options: {
            ident: 'postcss',
            sourceMap: true,
            plugins: loader => [
                require('autoprefixer')({
                    browsers: ['> 1%', 'last 2 Firefox versions', 'last 2 Chrome versions', 'last 2 Edge versions', 'last 2 Safari versions', 'Firefox ESR', 'IE >= 8'],
                }),
                require('postcss-opacity'),
                require('cssnano')({
                    discardComments: {
                        remove: comment => !copyrightPatt.test(comment),
                    }
                })
            ],
        }
    },
    {
        loader: 'less-loader',
        options: {
            sourceMap: true,
            strictMath: true,
            strictUnits: true,
        }
    }
]

如您所见，我有 3 个不同的加载器(css​​-loader、postcss-loader 和 less-loader)。它们都将 sourceMap 设置为 true，因此源映射应该返回到原始源，对吗？

我在这里做错了什么？

Answer 1

去掉cssnano后， map 看起来合理，但不准确，而且我的配置很简单。

.patent {        // line1
    .child {}    // map to line1
    .childs {}   // map to line1
}