Question

我正在开发一个离子应用程序，我正在尝试使用flag-icon-css库（https://github.com/lipis/flag-icon-css）。我使用npm install安装了库，并将库添加到我的package.json文件

我在app.scss文件中添加了以下内容：

$flag-icon-css-path: '~flag-icon-css/flags' !default;
@import "~flag-icon-css/sass/flag-icon";

无法识别此路径，我收到以下编译错误：

  sass: src/app/app.scss, line: 25 
  File to import not found or unreadable: ~flag-icon-css/sass/flag-icon. Parent style sheet: 
  /src/app/app.scss 

  L25:  @import "~flag-icon-css/sass/flag-icon";

将路径更改为相对表示法时，即：

$flag-icon-css-path: '../../node_modules/flag-icon-css/flags' !default;
@import '../../node_modules/flag-icon-css/sass/flag-icon';

代码编译并解析了css类，但app无法解析flags svg文件的路径，导致404错误。

我的webpack配置：

var path = require('path');
var webpack = require('webpack');
var ionicWebpackFactory = require(process.env.IONIC_WEBPACK_FACTORY);

module.exports = {
  entry: process.env.IONIC_APP_ENTRY_POINT,
  output: {
    path: '{{BUILD}}',
    publicPath: 'build/',
    filename: process.env.IONIC_OUTPUT_JS_FILE_NAME,
    devtoolModuleFilenameTemplate: ionicWebpackFactory.getSourceMapperFunction(),
  },
  devtool: process.env.IONIC_SOURCE_MAP_TYPE,

  resolve: {
    extensions: ['.ts', '.js', '.json'],
    modules: [path.resolve('node_modules')]
  },

  module: {
    loaders: [
      {
        test: /\.json$/,
        loader: 'json-loader'
      },
      {
        test: /\.ts$/,
        loader: process.env.IONIC_WEBPACK_LOADER
      }
    ]
  },

  plugins: [
    ionicWebpackFactory.getIonicEnvironmentPlugin(),
  ],

  // Some libraries import Node modules but don't use them in the browser.
  // Tell Webpack to provide empty mocks for them so importing them works.
  node: {
    fs: 'empty',
    net: 'empty',
    tls: 'empty'
  }
};

有什么想法吗？

将css库导入离子项目

0 个答案: