Блог

Моя цель — включить файл scss в файл js, чтобы использовать стили внутри sweetalert, которые я визуализирую из файла js.

Я ожидал, что приложение поймет мою инструкцию import, но вместо этого я получаю следующее сообщение об ошибке:

  ERROR in ./src/scss/site.scss 6:0
    Module parse failed: Unexpected character '@' (6:0)
    You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders
    |
    | /* Bootstrap required */
    > @import '../../node_modules/bootstrap/scss/functions';
    | @import '../../node_modules/bootstrap/scss/variables';
    | @import '../../node_modules/bootstrap/scss/mixins';
     @ ./src/js/includes/ie11/ie11popup.js 2:0-33
     @ ./src/js/includes/utils.js
     @ ./src/js/includes/page.js
     @ ./src/js/fallback.js

    ERROR in ./src/scss/bootstrap.scss 6:0
    Module parse failed: Unexpected character '@' (6:0)
    You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders
    |
    | /* Variable overrides   custom variables */
    > @import 'variables';
    |
    | /* Bootstrap required */
     @ ./src/js/includes/ie11/ie11popup.js 3:0-38
     @ ./src/js/includes/utils.js
     @ ./src/js/includes/page.js
     @ ./src/js/fallback.js
  

Мои инструкции по импорту в ie11popup.js файл:

 import '../../../scss/site.scss'
import '../../../scss/bootstrap.scss'
  

Структура проекта:

 src
|_js
|  |_includes
|           |_ie11
|                 |_ie11pop.js
|
|_scss
     |_bootstrap.scss amp;amp; site.scss
  

Мой webpack.config.js

 const { CleanWebpackPlugin } = require('clean-webpack-plugin')
const CopyWebpackPlugin = require('copy-webpack-plugin')
const MiniCssExtractPlugin = require('mini-css-extract-plugin')
const IgnoreEmitPlugin = require('ignore-emit-webpack-plugin')

const devServer = {
  port: 8000
}
const distPath = __dirname   '/dist'
const distAssetsPath = distPath   '/assets'
const version = Date.now()
//const version = process.env.npm_package_version

/* Bundles */
const BootstrapConfig = {
  target: 'web',
  entry: './src/js/bootstrap.js',
  externals: {
    jquery: 'jQuery'
  },
  output: {
    filename: 'bootstrap.js',
    path: distAssetsPath
  },
  module: {
    rules: [
      {
        test: /.scss$/,
        use: [
          {
            loader: MiniCssExtractPlugin.loader
          },
          {
            loader: 'css-loader'
          },
          {
            loader: 'sass-loader'
          }
        ]
      }
    ]
  },
  plugins: [
    new MiniCssExtractPlugin({
        filename: 'bootstrap.css'
    })
  ],
  devServer: devServer
}

const FallbackConfig = {
  target: 'web',
  entry: './src/js/fallback.js',
  output: {
    filename: 'fallback.js',
    path: distAssetsPath
  },
  module: {
    rules: [
      {
        test: /.js$/,
        exclude: /(node_modules|bower_components)/,
        use: {
          loader: 'babel-loader',
          options: {
            presets: [
              [
                '@babel/preset-env',
                {
                  corejs : {
                    version: '3.6',
                    proposals: true
                  },
                  useBuiltIns: 'entry',
                  targets: {
                    ie: '11'
                  }
                }
              ]
            ],
            plugins: ['@babel/plugin-transform-runtime']
          }
        }
      }
    ]
  },
  devServer: devServer
}

const SiteConfig = {
  target: 'web',
  entry: './src/js/site.js',
  output: {
    filename: 'site.js',
    path: distAssetsPath
  },
  module: {
    rules: [
      {
        test: /.(avif|jpg|gif|png|svg|webp)$/,
        use: [{
          loader: 'file-loader',
          options: {
            name: '[name].[ext]',
            outputPath: 'images'
          }
        }]
      },
      {
        test: /.(woff|woff2)$/, use: [{
          loader: 'file-loader',
          options: {
            name: '[name].[ext]',
            outputPath: 'fonts'
          }
        }]
      },
      {
        test: /.scss$/,
        use: [
          {
            loader: MiniCssExtractPlugin.loader
          },
          {
            loader: 'css-loader'
          },
          {
            loader: 'postcss-loader',
            options: {
              plugins: [
                require('autoprefixer')
              ]
            }
          },
          {
            loader: 'sass-loader'
          }
        ]
      }
    ]
  },
  plugins: [
    new MiniCssExtractPlugin({
      filename: 'site.css'
    })
  ],
  devServer: devServer
}

const MainConfig = {
  target: 'web',
  entry: './src/js/index.js',
  output: {
    path: distPath
  },
  externals: {
    jquery: 'jQuery'
  },
  module: {
    rules: [
      {
        test: /.html$/,
        use: [{
          loader: 'file-loader',
          options: {
            name: '[name].html',
            output: {
              path: distPath
            }
          },
        },
        {
          loader: 'extract-loader',
        },
        {
          loader: './src/js/webpack/buildversion-loader.js',
          options: {
            buildversion: 'v='   version
          }
        },
        {
          loader: 'html-loader'
        }]
      },
      {
        test: /.(avif|jpg|gif|png|svg|webp)$/,
        use: [{
          loader: 'file-loader',
          options: {
            name: '[name].[ext]',
            outputPath: 'assets/images'
          }
        }]
      }
    ]
  },
  plugins: [
    new CleanWebpackPlugin(),
    new CopyWebpackPlugin([
      {
        from: './src/assets/images/logos/bildmarke.svg',
        to: 'favicon.svg',
      },
      {
        from: './src/robots.txt',
        to: '',
      },
      {
        from: './src/favicon.ico',
        to: '',
      },
      {
        from: './node_modules/jquery/dist/jquery.slim.min.js',
        to: 'assets/vendor',
        flatten: true
      }
    ]),
    new IgnoreEmitPlugin('main.js')
  ],
  devServer: devServer
}

/* Export configuration */
module.exports = (env, argv) => {
  if (argv.mode === 'development') {
    MainConfig.plugins.push(new CopyWebpackPlugin([{from: './stubs', to: 'stubs'}]))

    return [
      BootstrapConfig,
      SiteConfig,
      FallbackConfig,
      MainConfig,
    ]
  } else {
    return [
      BootstrapConfig,
      FallbackConfig,
      SiteConfig,
      MainConfig,
    ]
  }
}
  

Я попытался добавить обычный файл css в папку js file и импортировать его, но все равно получил ошибку, которую не смог устранить. Я воспроизведу эту ошибку, если это необходимо для устранения неполадок.

Если потребуется больше кода, дайте мне знать, и я предоставлю его.