Fehler bei @import bei der Verwendung von Extrakt-Text-webpack-Plugin

Question

Struktur Folder:

/resources 
    /assets 
    /css 
     /config.less 
    /js 
     /index.js 
     /components 
     /Test 
      /Presentation.jsx 
      /styles.less 

In config.less Ich möchte einige Variablen speichern. In Test/styles.less muss ich config.less enthalten:

@import 'config.less'; 

Compiler gibt diesen Fehler zurück:

@import 'config.less';
^
Can't resolve './config.less'

(Anmerkung: es versucht ./config.less statt config.less zu laden)

Dazu gehören Werke:

@import '../../../css/config.less'; 

Aber es ist sehr unpraktisch. Hier ist meine Webpack-Konfiguration:

module.exports = { 
    output: { 
     filename: 'bundle.js', 
     publicPath: '/' 
    }, 
    module: { 
     loaders: [ 
      { 
       test: /\.(js|jsx)$/, 
       loader: 'babel-loader', 
       exclude: /node_modules/, 
       query: { 
        presets: [ 
         ['react'], 
         ['es2015'], 
         ['stage-0'] 
        ], 
        plugins: [ 
         ['transform-decorators-legacy'], 
         ['transform-runtime'], 
         ['transform-react-remove-prop-types'], 
         ['transform-react-constant-elements'], 
         ['transform-react-inline-elements'] 
        ] 
       } 
      }, 
      { 
       test: /\.less$/, 
       loader: extractTextPlugin.extract({ 
        publicPath: '../public', 
        use: [ 
         { 
          loader: 'css-loader' 
         }, 
         { 
          loader: 'less-loader', 
          options: { 
           plugins: [ 
            new lessPluginLists() 
           ] 
          } 
         } 
        ] 
       }), 
      } 
     ], 
    }, 
    plugins: [ 
     new webpack.NoEmitOnErrorsPlugin(), 
     new webpack.DefinePlugin({ 
      'process.env.NODE_ENV': '"production"' 
     }), 
     new webpack.DefinePlugin({ 
      'process.env.NODE_ENV': '"development"' 
     }), 
     new webpack.ProvidePlugin({ 
      'fetch': 'imports?this=>global!exports?global.fetch!whatwg-fetch' 
     }), 
     new webpack.optimize.UglifyJsPlugin({ 
      beautify: false, 
      comments: false, 
      sourceMap: true, 
      compress: { 
       sequences: true, 
       booleans: true, 
       loops: true, 
       unused: true, 
       warnings: false, 
       drop_console: true, 
       unsafe: true 
      } 
     }), 
     new extractTextPlugin({ 
      filename: 'bundle.css', 
      allChunks: true 
     }), 
     new optimizeCssAssetsPlugin({ 
      assetNameRegExp: /\.css$/g, 
      cssProcessor: require('cssnano'), 
      cssProcessorOptions: { 
       discardComments: { 
        removeAll: true 
       } 
      }, 
      canPrint: true 
     }) 
    ], 
    resolve: { 
     modules: [ 
      './node_modules', 
      path.resolve(__dirname, 'resources/assets/js'), 
      path.resolve(__dirname, 'resources/assets/css') 
     ], 
     extensions: ['.less', '.css', '.js'] 
    } 
}; 

Es scheint, dass resolve.modules Konfiguration in einer solchen Situation nicht funktioniert. (Ich habe auch versucht, die resolveLoader-Einstellungen für das Webpack zu verwenden)

Answer 1

Gelöst. Fügen Sie einfach das Präfix ~:

@import '~config.less' 

hinzu