오류 추출물 텍스트 웹팩 - 플러그인을

폴더 구조를 사용하는 경우. Test/styles.less에서 나는 config.less을 포함해야합니다오류 추출물 텍스트 웹팩 - 플러그인을

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

이

이 (참고 :이 시도 대신 config.less의 ./config.less을로드)

이 포함 작품 :

@import 'config.less';

컴파일러는이 오류를 반환

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

하지만 그것은 매우 불편합니다. 여기 내 webpack 설정입니다 :

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'] 
    } 
};

그런 상황에서는 resolve.modules 구성이 작동하지 않는 것 같습니다. (webpack 용 resolveLoader 설정을 사용하려고 시도했습니다.)

출처

2017-10-02 Andrei Vorsa