捆绑后CSS中的URL地址错误

时间:2018-03-30 18:58:48

标签: css webpack sass bundler

当我从node_modules中的包中捆绑CSS时,我遇到了路径相对性的麻烦。

在原始样式表中,从子文件夹中请求图像。通过Webpack文件夹绑定后,文件夹名称是正确的,但在映像路径之前没有../

附上我能提供的所有内容,包括项目文件夹结构和webpack配置。

vendor.scss

@import "~leaflet/dist/leaflet.css";
@import "~leaflet-draw/dist/leaflet.draw.css";  
@import "~leaflet-easybutton/src/easy-button.css";

原始leaflet.draw中的图像导入(css和html在一个文件夹中)

url('images/[filename].[ext]')

捆绑后图像导入(css在子文件夹中)

url('img/[filename].[ext]')

文件夹结构

node_modules/
- leaflet-draw/
- - dist/
- - - leaflet-draw.css
- - - images/
- - - - [images]
src/
- scss/
- - vendor.scss
- index.html
dist/
- css/
- - vendor.css
- img/
- - [images from imported css]
- index.html

webpack.cofing.js

const path = require('path');
const CleanWebpackPlugin = require('clean-webpack-plugin');
const ExtractTextPlugin = require("extract-text-webpack-plugin");
const HtmlWebPackPlugin = require("html-webpack-plugin");

module.exports = {
  mode: 'development',
  entry: {
    'vendor': [
      './src/js/vendor.js',
      './src/scss/vendor.scss'
    ],
    'fa': './src/js/fa.js',
    'sanAndreas': [
      './src/js/sa.js',
      './src/scss/sa.scss'
    ]
  },
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'js/[name].js',
    sourceMapFilename: '[file].map'
  },
  module: {
    rules: [{
        test: /\.js$/,
        include: path.resolve(__dirname, 'src/js'),
        use: {
          loader: 'babel-loader',
          options: {
            presets: 'env'
          }
        }
      },
      {
        test: /\.(png|jpg|gif|svg)$/,
        use: [
          {
            loader: 'file-loader',
            options: {name: 'img/[name].[ext]'}  
          },
        ]
      },
      {
        test: /\.(sass|scss)$/,
        include: path.resolve(__dirname, 'src/scss'),
        use: ExtractTextPlugin.extract({
          use: [{
              loader: "css-loader",
              options: {
                sourceMap: true,
                minimize: true
              }
            },
            {
              loader: 'resolve-url-loader'
            },
            {
              loader: "sass-loader",
              options: {
                sourceMap: true
              }
            },
          ]
        })
      },
      {
        test: /\.html$/,
        use: [
          {
            loader: "html-loader",
            options: { minimize: true }
          }
        ]
      },
    ]
  },
  devtool: "source-map",
  plugins: [
    new CleanWebpackPlugin(['dist']),
    new ExtractTextPlugin({
      filename: './css/[name].css',
      allChunks: true
    }),
    new HtmlWebPackPlugin({
      template: "./src/index.html",
      filename: "./index.html",
      inject: false
    }),
    new HtmlWebPackPlugin({
      template: "./src/sa.html",
      filename: "./sa.html",
      chunks: ['vendor', 'sanAndreas',  'fa']
    }),
    new HtmlWebPackPlugin({
      template: "./src/five.html",
      filename: "./five.html",
      chunks: []
    })
  ]
}

0 个答案:

没有答案