使用vue-loader和webpack2加載手寫筆庫和全局工作表

我試圖遷移一個項目，我開始使用bourgeon template到Quasar framework。使用vue-loader和webpack2加載手寫筆庫和全局工作表

在這個過程中，我必須更新自的WebPack 1至2一切正常，除了以下：

我使用觸筆與一些librairies（破裂和截拳道）和樣式表，其中我存儲一些變量這應該是全球可用，並任何vue文件。我看到另一個話題，手寫筆被手動導入到所有需要它的vue文件中。但爲此，我寧願按照bourgeon模板全局自動提供。

注意在下面的代碼，我通過...

刪除non-necessary code在的WebPack 2類星體，該文件是如下。

CSS-utils.js

基本上，它輸出爲CONFIG VUE裝載機或常規式裝載機，在下面的形式中，裝載機（請注意，我刪除參考上海社會科學院，因爲它是不是與此有關）：

{ 
    css: 'vue-style-loader!css-loader', 
    styl: 'vue-style-loader!css-loader!stylus-loader, 
    stylus: 'vue-style-loader!css-loader!stylus-loader 
}

個

webpack.base.conf.js

Link

感興趣的代碼部分：

module: { 
    rules: [ 
    ... 
    { 
     test: /\.vue$/, 
     loader: 'vue-loader', 
     options: { 
     postcss: cssUtils.postcss, 
     loaders: merge({js: 'babel-loader'}, cssUtils.styleLoaders({ 
      sourceMap: useCssSourceMap, 
      extract: env.prod 
     })) 
     } 
    } 
    ... 
    ] 
}

的WebPack V1的配置我想口向V2

module.exports = { 
    ... 
    stylus: { 
    use: [ 
     require('jeet')(), 
     require('rupture')(), 
    ], 
    import: [ 
     path.resolve(__dirname, '../src/styles/index.styl') 
    ] 
    } 
}

我用的WebPack V2問題

我不能找到一種方法來添加一段代碼（從1的WebPack語法）的CSS-utils.js或webpack.config.base .js文件提供給雙方VUE文件和STYL /筆文件的截拳道和破裂librairies和index.styl片。

我通過了vue-loader和stylus-loader的文檔，但我無法完成工作。

在webpack.config.base.js中添加下面的代碼不起作用，我不知道該怎麼辦。節點向我輸出一個消息錯誤，明確指出既不導入Jeet/Rupture也不導致index.styl，因爲它無法重新構建我在index.styl中定義的某些變量或類似於Rupture的+above('tablet')的語法。

module.exports = { 
    ... 
    rules: [ 
    ...  
    ], 
    plugins: [ 
    ... 
    new webpack.LoaderOptionsPlugin({ 
    minimize: env.prod, 
    options: { 
     context: path.resolve(__dirname, '../src'), 
     ... 
     stylus: { 
     default: { 
     use: [ 
      require('jeet')(), 
      require('rupture')() 
     ], 
     import: [ 
      path.resolve(__dirname, '../src/styles/index.styl') 
     ] 
     } 
     } 
    } 
    }) 
    ] 
}

任何幫助，將不勝感激，謝謝:)

來源

2017-02-16 Julien

你有沒有嘗試沒有那個「默認」那裏？意義{手寫筆：{使用....}}。 –

嗨，對於遲到的答案表示歉意，我不得不擱置幾天。它確實有效，雖然我很確定我以前嘗試過，但是在webpack配置清理完成後（實際上從頭開始），它現在可以工作。萬分感謝。 – Julien

正如指出的@Razvan Stoenescu，下面的代碼peice的解決我的問題。非常感謝。

module.exports = { 
    ... 
    rules: [ 
    ...  
    ], 
    plugins: [ 
    ... 
    new webpack.LoaderOptionsPlugin({ 
    minimize: env.prod, 
    options: { 
    context: path.resolve(__dirname, '../src'), 
    ... 
    stylus: { 
     use: [ 
     require('jeet')(), 
     require('rupture')() 
     ], 
     import: [ 
     path.resolve(__dirname, '../src/styles/index.styl') 
     ] 
     } 
    } 
    }) 
] 
}

來源

2017-02-23 13:23:19 Julien

有沒有一種方法來配置棱角4和角棱鏡的破裂？ – Hacker

使用vue-loader和webpack2加載手寫筆庫和全局工作表

回答

相關問題