왜 webpack 별칭이 작동하지 않습니까?

내 프로젝트에서 webpack 및 postcss-import를 사용합니다. 구성 요소를 작성하고 일부 구성 요소를 다른 구성 요소에 중첩시킬 수 있으므로 import '../../../component-a';과 같은 경로를 작성하는 것이 복잡합니다. 이 문제를 해결하기 위해 별칭을 만들고 싶습니다. 그래서 내 webpack.config.js에서 쓴 :왜 webpack 별칭이 작동하지 않습니까?

resolve: { 
     alias: { 
      '@blocks': path.resolve(__dirname, './source/blocks'), 
      '@styles': path.resolve(__dirname, './source/styles')

내 webpack 구성은 루트에 있습니다. 그래서, 문제는 제가 CSS로 쓸 때 @import '@styles/vars.css'; 같은 것입니다 - 작동하지 않습니다. 나는 오류 '정의되지 않은 변수 bla bla bla ...'를 얻습니다. 그러나 js 파일 내부에서 블록을 가져오고 import Logo from '@blocks/logo';을 작성하면 올바르게 작동합니다. 또한 나는 @import '@styles/vars.css';이 스타일러스와 함께 작동한다는 것을 알고 싶습니다. 어쩌면 내가 postcss 가져 오기 플러그인에 대해 뭔가를 놓칠 수 있습니다. 어떻게 작동 시키는가?

UPD postcss의 설정 부분 :

```

var webpack = require("webpack"); 

function postcssModules() { 
    return [ 
     require('postcss-nested')(), 
     require('postcss-import')({ 
      addDependencyTo: webpack 
     }), 
     require('postcss-simple-vars'), 
     require('postcss-cssnext')({ 
      warnForDuplicates: false 
     }), 
     require('lost') 
    ] 
}; 

module.exports = postcssModules;

```

출처

2016-08-09 Hola

와

const resolver = ResolverFactory.createResolver({ alias: { '@blabla': path.resolve(__dirname, 'src') }, extensions: ['.css'], modules: ['src', 'node_modules'], useSyncFileSystemCalls: true, fileSystem });

대체하는 것은 내가 그것을했다 너무 –

@DominicTobias 확인 설정의 postcss 부분을 게시하시기 바랍니다 – Hola

이가 (내가 거기에 대답) 도움이 될 수있다

https://github.com/postcss/postcss-import/issues/190#issuecomment-298078092 https://github.com/postcss/postcss-import/issues/187#issuecomment-298078080

원하는 경우 오 재사용 웹팩의 별칭,

const webpackBaseConfig = require('./webpack.config.base').default; 

const resolver = ResolverFactory.createResolver(
Object.assign({}, 
    webpackBaseConfig.resolve, { 
    modules: ['src', 'node_modules'], 
    useSyncFileSystemCalls: true, 
    fileSystem 
    }) 
);

출처

2017-05-10 19:47:21 pgmanutd

왜 webpack 별칭이 작동하지 않습니까?

답변

관련 문제