Question

尝试加载gif图像是.scss文件。

这是从我的scss文件中提取的。

div.quart:nth-child(2){
    background-image: url("./images/yoga_one.gif");
}

这是webpack配置文件。

var HtmlWebpackPlugin = require('html-webpack-plugin');
var ExtractTextPlugin = require('extract-text-webpack-plugin');
var UglifyJSPlugin = require('uglifyjs-webpack-plugin');

module.exports = {
entry: './src/index.js',

output: {
    path: __dirname + '/dist',
    filename: 'scripts.min.js'
},

module: {
  rules: [{
      test: /\.js$/,
      exclude: /(node_modules)/,
      use: {
        loader: 'babel-loader',
        options: {
          presets: ['es2015']
        }
      }
  }],

  rules: [{
    test: /\.(jpe?g|png|gif)$/i,
    use: ['url-loader', 'file-loder', 'image-webpack-loader'],
    options: {
      limit: 1000000,
      name: "/src/sass/[name].[ext]"
    }
  }],

  rules: [{
    test: /\.(scss|sass)$/,
    exclude: [__dirname + "/node_modules", __dirname + "/dist"],
    use: ExtractTextPlugin.extract({
      fallback: 'style-loader',
      use: ['css-loader', 'sass-loader', 'postcss-loader'],
      publicPath: '/dist'
    }),
  },

  {
    test: /.(ttf|otf|eot|svg|woff(2)?)(\?[a-z0-9]+)?$/,
    use: [{
      loader: 'file-loader',
      options: {
        name: '[name].[ext]',
        outputPath: 'fonts/',
        publicPath: '../'
      }
    }]
  }]
},

plugins: [
    new HtmlWebpackPlugin({
      title: 'YinYangYoga - Online Classes and Meditation',
      minify: {
        collapseWhitespace: true
      },
      filename: 'index.html',//localhost:8080
      template: 'src/template/main.html'
    }),

    new UglifyJSPlugin({
      test: /\.js($|\?)/i,
      sourceMap: true,
      uglifyOptions: {
          compress: true
      }
    }),

    new ExtractTextPlugin({
      filename: 'style.css',
      disable: false,
      allChunks: true
    })
  ]};

最后这是错误

./src/sass/images/yoga_one.gif中的

错误模块解析失败：C：\ Users \ Vektor \ Documents \ Web_Repos \ Project_responsive_one \ src \ sass \ images \ yoga_one.gif意外字符' '（1：6）您可能需要适当的加载程序来处理此文件类型。（此二进制文件省略了源代码） @ ./node_modules/css-loader!./node_modules/sass-loader/lib/loader.js！./node_modules/postcss-loader/lib！。/ src / sass / style.scss 8：46795-46827

文件层次结构：

├───node_modules
├───dist
│   └───fonts
└───src
    ├───sass
    │   └───images
    ├───scripts
    └───template

模块分析失败，意外的字符

0 个答案: